Angular2 :: NgFor :: Promises

Question

我有一项服务可以选择性地加载一些数据并同时将其缓存在内存中。如果稍后请求相同的数据，服务将返回缓存的副本。从服务中检索数据的方法返回一个Promise：

export class MyService {

  users = [];

  getSingleUser(id: string): Promise<User> {
    if (this.users[id]) return Promise.resolve(this.users[id]);
    return new Promise(resolve => {
      this.fetchUserFromNetwork(id)
        .then(user => {
          this.users[id] = user;
          resolve(user);
        })
    })
  }

  getUsersList(idList: string[]): Promise<User[]> {
    return Promise.all(idList.map(id => this.getSingleUser(id)));
  }

}

我有另一个对象，其中包含要显示的userIds 列表。

export class MyReport {
  userIds = [];
  addUserId(id: string) { this.userIds.push(id) }
}

现在我想在模板中呈现这些信息。在组件类中，我引用了MyReport (this.report) 的单例实例以及MyService (this.service) 的单例实例。 其他页面中的 UI 控件允许最终用户在 this.report 实例中添加/删除 userIds 列表。

为了呈现列表，我使用：

<div *ngFor="let user of (this.service.getUsersList(this.report.userIds) | async)">
  User: {{ user | json }}
</div>

但是，这最终会无限次调用MyService.getUsersList(...)。如此之多，以至于浏览器线程有效地挂起。

我该如何解决这个问题？我认为问题是这样的：Angular2 调用this.service.getUsersList(...)，通过async 管道传递它以获取列表，并呈现它。然后它再次调用相同的方法来查看 ChangeDetection 循环是否完成。但是，数组引用已更改，即使数据未更改。所以它会一遍又一遍地这样做。

我的目标如下：

1. 渲染 promise 返回的数据：this.service.getUsersList(this.report.userIds)

2. 如果this.report.userIds在应用程序的任何地方被修改，自动更新渲染列表。

3. 不会陷入无限循环。 =)

Answer 1

Promise.all 每次执行函数时都会创建一个 Promise。 您可以简单地创建一个变量来保存该值，而不是每次都创建它

  private _usersPromise: Promise<User[]>;
  getUsersList(idList: string[]): Promise<User[]> {
    if(this._usersPromise) return this._usersPromise;
    return this._usersPromise = Promise.all(idList.map(id => this.getSingleUser(id)));
  }