Angular 材料表數據源未與我的 HTTP 調用同步並且未重新呈現 dom

Question

所以我會開門見山，我正在構建一個 angular 應用程序，我正在使用 Angular 材料表。 有點免責聲明我對 Angular 和開發還很陌生

所以基本上我正在創建一個 dataSource 變量，我將在每次調用時不斷更新我的表數據，這就是發生這種情況的代碼

const siteFilter: SiteFilter = {}; this.siteControllerService.getAllSitesFilteredAndSorted(siteFilter, this.page).subscribe((data) => { this.data = data; // eslint-disable-next-line @typescript-eslint/no-non-null-assertion this.data.sort((a, b) => (a.siteId. > b?siteId: ; 1. -1)). this;dataSource = new MatTableDataSource(this.data). this.dataSource;sort = this;sort; });

（最初最后 3 行也在 ngoninit 中，我將它們設置為 1 秒超時，這確實解決了我的問題，但它一點也不好，我也知道將它放入我的構造函數中是不好的做法，但它因為我相信如果它在我的 oninit 之前運行並且我得到數據然后在我的 oninit 上觸發 detechchanges 它應該檢測到我的數據不是最新的當前 dom 並重新渲染它。）

我的@Component 看起來像這樣：

@Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-table', templateUrl: './table.component.html', styleUrls: ['./table.component.scss'], })

在 ngOnInit 內部，我調用 this.ref.detectChanges(); 在構造函數中是這樣的：
private ref: ChangeDetectorRef

現在這一切的原因是，現在上面的 HTTP 調用返回了一個對象數組，我將 object 放入數據源，據我所知，我的表應該使用新添加的數據重新呈現，但它來了引起我注意的是，有時我會打電話獲取我想要的 20 個數據條目，但在我的表上只能看到 14 或 16 個或無論如何可見，所以我很困惑記錄響應，即使我的表有 16 個條目 object我得到的正好是我要求的 20。

不確定這個 stackoverflow 是如何工作的，但我會繼續在我嘗試了什么部分所以我嘗試使用 changeDetector 因為我意識到數據在我的變量中但它沒有更新 DOM 我實現了上面的例子並且我我仍然在同一個問題上，好像 http 響應時間比平時長很多那么我在表中看到的數據不是當時數據源的數據。

這基本上意味着 dom 不代表我的數據源中的實際數據。

所以我的問題基本上是有沒有辦法讓我檢測到我的 http 調用 100% 結束然后我執行 this.dataSource = new MatTable... 等等。我已經嘗試進入調用中的成功箭頭 function但這也沒什么用，我也查看了異步等待的工作原理，但我真的無處可去，因為我仍然是新手，不知道如何實現異步等待功能。

不確定此信息是否相關，但我會分享此信息，因為如果是的話，感謝上帝，我們已經解決了這個問題，但 http 呼叫都不是由我或其他任何人創建的，這是通過dto-s BE 和諸如此類的東西以某種方式自動編譯到服務中並從人工制品下載為 NPM package 我們使用這個 package 擁有的服務我們根本無法編輯 http 調用我們只是使用各自的方法並將要求的數據提供給他們。 不確定這是否與問題相關或值得了解，但就在這里。

如果我能找到 go 的方向並提供幫助，那就太好了。

（如果有人建議我，我也問過聊天 GPT，向我提供了上面沒有用的例子。）

Answer 1

好吧，經過 2 周的努力去理解為什么會發生這種情況，我終於能夠找到一個解決方案，如果有人感興趣或有類似的問題，這就是為我解決的問題。

我已將從 API 獲取數據的邏輯移動到它自己的方法中，如下所示：

     GetAllSites() {
        const siteFilter: SiteFilter = {};
        this.siteControllerService
          .getAllSitesFilteredAndSorted(siteFilter, this.page)
          .pipe(first())
          .subscribe((data) => {
            this.data = data;
            this.data.sort((a, b) => (a.siteId! > b.siteId! ? 1 : -1));
            this.dataSource = new MatTableDataSource(this.data);
    
            this.dataSource.sort = this.sort;
            this.ref.detectChanges();
          });

現在這是在我的 ngOnInit 掛鈎中調用的第一件事。

唯一的區別是我在訂閱之前使用 a.pipe(first()) dataSource 已正確更新，並且 dom 正在使用新更新的數據進行刷新。

多么美妙的旅程。