Question

我正在努力实现一些非常简单的事情：
显示我的组件中的服务给出的数据。

以下是我以前的工作：

在我的组件中：

...

dataSet: String[];

ngOnInit(){
  this._service.getDataId().then(data => this.dataSet = data);
}

...

在我的服务中：

...

getDataId(){
  return this.http.get(adress).toPromise()
    .then(response => response.json() as String[])
    .catch(this.handleError);
} // return a Promise<String[]>

...

在视图中：

... 

<ul>
  <li *ngFor="let data of dataset">
    {{ data['id'] }}
  </li>
</ul>

...

但现在，我更改了服务功能以获取更多数据从那时起我得到 ExpressionChangedAfterItHasBeenCheckedError 。
以下是服务的变化：

...

getMoreData() {
  const result: Map<string, String[]> = new Map();
  return this.http.get(this.adress).toPromise()
    .then((response) => {
      return Promise.all(Array.from(response.json())
      .map(id => {
        return this.http.get(this.adress + '/' + id').toPromise()
        .then((rep) => {
          result.set(domain['@href'], rep.json() as String[]);
        }).catch(this.handleError)
      })
    );
  })
  .then(() => result)
  .catch(this.handleError);
} // return a Promise<Map<string, String[]>>

...

即使正确显示数据，也会引发错误我已经尝试了一些解决方法（setTimeout，ChangeDetectorRef），但我甚至不知道为什么这个有效并且不再存在，因为两个函数都返回Promise<Stuff>。

我也知道我需要在组件中初始化我的属性，以避免在加载视图时出现null错误：

this.moreData: Map<string, String[]> = new Map();

这也可能导致我的问题，但我该怎么办呢？

---
项目使用
Angular 4.2.2
Typescript 2.3.4

Answer 1

事实上，这与此问题有关： https://github.com/angular/angular/issues/17725

地图＆lt;＆gt;结构在这里是问题，因为每次在视图中使用它时都会创建一个新的迭代器（例如：使用.entries时）

可以在上面的链接中找到解决方法。

带有Promise的ngOnInit上的ExpressionChangedAfterItHasBeenCheckedError

1 个答案: