来自模板的函数调用以无限循环结束 - Angular 6

Question

我正在从模板中调用一个函数，该函数进行 async 调用并在 html 中显示返回的响应。但是，此调用以无限循环结束。

我已经阅读了我们应该使用变更检测策略的解决方案，但这也没有帮助。

sample.html :

<div *ngFor = "let data of hugeData; let i = index">
 <span *ngIf="getData(i) | async as variable" [innerHTML] = "variable">
</div>

sample.component.ts:

@Component({
selector : 'sample',
templateUrl : './sample.html',
changeDetection : ChangeDetectionStrategy.OnPush
})

sample.component.ts中的函数调用：

getData(i){
 return new Promise (function (resolve,reject){
  this.makeApiCall(i).subscribe(response=>{
  this.cd.detectChanges();
  resolve(response);
  })
 })
}

makeApiCall(i) 是另一个函数调用，它进行 API 调用和 returns 作为 Observable 的响应。

在这种情况下，它会抛出一个错误：无法读取未定义的属性 'makeApiCall'。

请帮我解决这个问题。提前致谢。

Answer 1

这个 this 引用了在 Promise 参数中传递的函数，您可能希望 this 引用 class

一个简单的解决方案是在 Promise.

上使用箭头函数

例如：

return new Promise ((resolve,reject) => { ...

Answer 2

尝试定义您的回复类型：

   
.subscribe((response: Datatype) => {...})

或者你可以试试：

public reloadNotifier: Subject<void> = new Subject<void>();
notifyForReload() {
        this.reloadNotifier.next();
    }

this.makeApiCall(i).reloadNotifier.subscribe(response ...

我遇到了类似的问题，每次都有一个问题解决了。祝你好运！

来自模板的函数调用以无限循环结束 - Angular 6

Function call from template ends in infinite loop - Angular 6

javascript

angular6