對於 Angular ngIf 異步/可觀察 state 更改錯誤，今天沒有好的答案

Question

谷歌搜索似乎幾乎所有曾經涉足 Angular 的人都曾遇到過這個問題：

你使用*ngIf指令創建一個 Dom 元素：

<div *ngIf="array.length">
Don't show me until I'm ready please !
</div>

您在現場對子 dom 是否應該存在進行了評估。

然后，例如，您將收到您的數據作為 api 響應：

 this.http.post(
      this.url,
      args,
      this.authenticationService.getRequestOptions()
    ).subscribe(data => {
        this.array = data;
        console.log('truthy? : ', this.array.length);
    }
 );

由於某種原因，此時 Angular 更改檢測失敗， *ngIf Dom 節點未評估並變為可見。

即使您的控制台給了您：

truthy? : 1

這里發生了什么，最好的方法是什么？

Answer 1

問題是 changeDetect 在 ngOnInit 生命周期中的所有意圖和目的都是關閉的。 （對於之前的東西，比如構造函數，你應該考慮關閉它）

只有在 ngAfterViewInit 生命周期，changeDetect 才會開始備份。

通過在 ngAfterViewInit 中調用我的 API，我得到了正確的結果。

Answer 2

僅提及另一種可能的解決方案。

它也很典型：

someObservable$ = this.http.post(
          this.url,
          args,
          this.authenticationService.getRequestOptions()
);

// or if getRequestOptions() somehow returns an observable:

someObservable$ = this.authenticationService.getRequestOptions().pipe(
    mergeMap((options) => {
        return this.http.post(this.url, args, options);
    })
);

<div *ngIf="(someObservable$ | async)?.length">
    Don't show me until I'm ready please !
</div>

請注意，此示例代碼段中可能缺少幾件事，例如避免完成多個 (Post) 請求。