Question

我正在学习在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的浏览器中加载。

如何解决这个问题？

Answer 1

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

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

Answer 2

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

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

Answer 3

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

return !data;

第二，您只需使用async管道即可解决Promise

角度4：从服务中返回承诺会进入无限循环

3 个答案: