javascript - 带有 Promise 的 ngOnInit 上的 ExpressionChangedAfterItHasBeenCheckedError

标签 javascript angular typescript promise

我正在尝试实现一些非常简单的事情:
显示我的组件中的服务提供的数据。

这就是我曾经有用的东西:

在我的组件中:

...

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[]>

...

在 View 中:

... 

<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>

我还知道我需要在组件中像这样初始化我的属性,以避免加载 View 时出现 null 错误:

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

这也可能会导致我的问题,但是我该怎么办?

---
项目使用
Angular 4.2.2
Typescript 2.3.4

最佳答案

其实和这个问题有关: https://github.com/angular/angular/issues/17725

Map<> 结构是这里的问题,因为每次在 View 中使用它时(例如:使用 .entries 时),它都会创建一个新的迭代器

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

关于javascript - 带有 Promise 的 ngOnInit 上的 ExpressionChangedAfterItHasBeenCheckedError,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44695139/

相关文章:

javascript - jquery 无法在 sharepoint 2013 中工作

javascript - 我可以在 typescript 中使用 handsontable 吗

javascript - JavaScript 中有没有一种方法可以实例化不一定是函数的对象?

arrays - 如何在 TypeScript 中正确键入 Array.map 回调?

javascript - 当元素位于触发器之外时,Javascript 显示出现问题

angular - 如何修复我的 Angular 测验应用程序中多选题的评分问题?

css - Mat-form-field 在不同的浏览器中有不同的高度

javascript - Angular 2 - 顺序 HTTP 请求

javascript - 没有ivy如何编译库?

angular - Ionic 2 auth - 如果本地存储上有用户,则跳过登录页面