0

我有一个名为“用户数据”的服务，它负责在收到请求时获取“用户数据”。

我有一个页面负责显示“用户数据”。当页面加载时，它会获取数据并显示。

我有一个菜单，其中包含一些按钮。点击这些按钮将向“用户数据”服务发送请求并修改数据。当数据被修改时，我希望页面得到有关更改的通知并调整页面。

我所做的是

  • 在服务中：发布一个名为“user:change”的事件，并与修改后的数据一起发送
导出类用户数据{
    用户 = [];
    ……
    //- 如果数据改变，
    //- 发布事件
    设置用户（用户）{
        this.users = 用户；
        this.events.publish('user:change', users);
    }
}
  • 在页面中，订阅捕捉这个事件
导出类 UserListPage {
    用户 = [];

    //- 在页面即将显示时订阅
    ionViewWillEnter() {
        this.events.subscribe('user:change', this.updateUsers);
    }

    //- 在页面即将显示时订阅
    ionViewDidLeave() {
        this.events.unsubscribe('user:change', this.updateUsers);
    }

    //- 更新
    更新用户（用户事件数据）{

        console.log('即将更新');
        if (userEventData[0] instanceof Array) {
             this.users = userEventData[0];
        }
        控制台.log(this.users);
    }

}

函数updateUsers一切正常，除了this.users没有分配新值。这很奇怪。

有时，当我调试时，我收到一个错误，例如：“尝试分配给只读属性”

你知道为什么吗？

4

2 回答 2

3

我可以建议使用Observables代替事件吗？即使您可以使用事件完成相同的操作，但由于您使用服务来获取数据，这将是一种更好的方法。在这里你可以看到这个工作 plunker中的代码。

所以通信将是：

Btn / page ---[call the service]---> Service ---[notify other page and send data]---> Page

所以在服务中，你可以创建一个observable，这样其他页面就可以订阅它，并在数据准备好时得到通知。

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class UserDataService  { 

  private getDataObserver: any;
  public getData: any;

  constructor() {
    this.getDataObserver = null;
    this.getData = Observable.create(observer => {
        this.getDataObserver = observer;
    });
  }

  public getUserData() {
    // Fake data to send to the page
    let userList = [
      { id: 1, name: 'user01 '},
      { id: 2, name: 'user02 '},
      { id: 3, name: 'user03 '}]

    // This simulates an http request
    setTimeout(() => {
      // The next method will notify all the subscribers and will 
      // send the data.
      this.getDataObserver.next(userList);
    }, 1000);
  }
}

该next(...)方法将通知所有订阅者（在本例中为其他页面）并将数据发送给它。

然后在另一个页面中，您只需要订阅该 observable 即可在数据可用时收到通知，并像这样调用服务：

import { Component } from "@angular/core";
import { UserDataService } from 'service.ts';

@Component({
  templateUrl:"home.html"
})
export class HomePage {

  users: any[];

  constructor(private service: UserDataService) {
      // We subscribe to the observable to be notified when
      // the data is ready
        this.service.getData.subscribe((userList) => {
      this.users = userList;
    });
    }

  public getData(){
    this.service.getUserData();
  }
}

确保从 App 组件UserDataService的providers数组中添加 ，以便在整个应用程序（单例服务）中使用相同的实例。

import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { UserDataService } from 'service.ts';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [UserDataService]
})
export class MyApp {
  constructor(private platform: Platform) {
    this.rootPage = HomePage;
  }
}

ionicBootstrap(MyApp);
于 2016-08-09T20:59:53.657 回答
0

我唯一错的是在单独的地方编写处理“updateUser”的函数。以下代码适用于我：

<pre>
export class UserListPage {
    users = [];

    //- subscribe when the page is about to show
    ionViewWillEnter() {
        this.events.subscribe('user:change', (userEventData){
            console.log('About to update');
            if (userEventData[0] instanceof Array) {
                  this.users = userEventData[0];
            }
            console.log(this.users);
        );
    }

    //- subscribe when the page is about to leave
    ionViewDidLeave() {
        this.events.unsubscribe('user:change', ()=>());
    }

}
</pre>
于 2016-08-10T12:28:50.040 回答