Angular 4：从服务返回承诺进入无限循环答案

【问题标题】：Angular 4: Returning promise from service goes into infinite loopAngular 4：从服务返回承诺进入无限循环
【发布时间】：2018-07-22 02:38:33
【问题描述】：

我正在学习在 Angular 4 中使用 Jasmine 测试异步代码。所以，我在服务中创建了一个方法

getResolvedData(): Promise<boolean> {
  return Promise.resolve(!!localStorage.getItem('token'));
}

并在组件的方法中订阅此承诺

getAsyncData() {
  this.title = 'app';
  this.service.getResolvedData().then((data) => {
    return !data;
  });
}

在模板中使用该组件的方法getAsyncData()作为

<a>
    <span *ngIf="getAsyncData()">Async Data</span>
    <span *ngIf="!getAsyncData()">No Async Data</span>
</a>

但是，由于一旦 HTML 调用组件内的方法就会创建无限循环，因此应用程序不会在 ng serve --open 上的浏览器中加载。

如何解决？

【问题讨论】：

您的 getAsyncData() 不返回任何内容。所以它返回未定义，这总是假的。所以你的代码相当于 No Async Data
此外，每次用户与应用程序交互时都会调用您的 getAsyncData（调用检测更改时）

标签： angular promise karma-jasmine es6-promise

【解决方案1】：

我认为你可能想做类似的事情

 <span *ngIf="service.getResolvedData() | async">Async Data</span>

请记住service不能是private在组件模板中使用

或

    asyncResult;
    ngOnInit() {
      this.title = 'app';
      this.service.getResolvedData().then((data) => {
        return asyncResult=!data;
      });
    }

和

<a>
    <span *ngIf="asyncResult">Async Data</span>
    <span *ngIf="!asyncResult">No Async Data</span>
</a>

【讨论】：

【解决方案2】：

首先。你希望从中得到什么？

return !data;

其次，您可以简单地使用async 管道来解决 Promise

【讨论】：

【解决方案3】：

您可以尝试在 ngOnInit() 中声明 getSyncData() 方法。或者您可以在按钮上调用 onClick 函数例如

export class DataComponent Implements OnInit{
ngOnInit(){
this.getSyncData()
}
}

【讨论】：