物料表未反映數據源上的更改

Question

這是我在堆棧溢出中的第一個問題。 我會盡力而為，但我不知道如何簡短，因此這將是一長篇文章。 對於那個很抱歉。 我保證在問之前我已經搜索並嘗試了很多東西，但是現在我有點迷失了。

我正在Angular 6中開發一個簡單的應用程序，以跟蹤軟件要求和與這些要求相關的測試。

• 我有一個名為RequisiteList的組件，其HTML部分包含一個mat表，該表具有我自己的Requisite模型類的數組作為[dataSource]。 將該數組作為@Input參數接收，並且它還有一個@Output參數，它是一個EventEmitter，每次單擊列表中的Requisite時都會通知並傳遞給父組件。

• 我利用RequisiteList的ReqListMain，這是由列表和過濾的分層樹上的組件的內部。 該組件工作正常，可以按預期顯示和篩選必要條件。 該組件還捕獲列表的@Output事件，並將其作為@Output傳遞給其父級。

• 最后（與該問題相關的內容），我有一個TestView組件，該組件既有一個RequisiteList實例以顯示當前與當前測試相關的必備條件，又有一個ReqListMain實例以向當前測試添加新的必需條件（例如“瀏覽器” “）。 該TestView具有與當前正在可視化的測試相對應的模型類Pectest的實例，該實例具有Requisite數組。

最后一個組件的想法是，每當單擊“瀏覽器”列表的必要條件時，便將其添加到當前測試的列表中。 為了做到這一點，在與瀏覽器列表的@Output事件關聯的回調方法中，我嘗試將接收到的Requisite添加為參數：

addrequisite(requisite: Requisite) {
this.currentTest.requisites.push(requisite);
console.log('Current test: ');
console.log(this.currentTest);
}

在TestView的HTML部分中，我插入了RequisiteList組件，如下所示：

<app-requisitelist [requisites]="currentTest.requisites" ngModel name="reqlistview"></app-requisitelist>

（ ngModel屬性是我一直在嘗試的事情的一部分，我不確定是否有必要）。

結果是：

• 單擊的必備條件未顯示在列表中。
• 在控制台輸出中，我可以看到currentTest對象的內容，並且可以驗證實際上已將單擊的必需項添加到該對象的Requirements數組中，以便觸發該事件，並且子組件向上傳遞該對象。

我不確定我的問題是數據綁定是通過值進行的（我不這樣認為，因為我綁定的是對象AFAIK的數組），或者表未檢測到數據更改（我已經嘗試過強制使用ChangeDetector或其他方法進行數據更改檢測。

Answer 1

您將數組傳遞給app-requisitelist組件。 該組件等待此數組更改來更新內容。 當您執行this.currentTest.requisites.push(requisite) ，數組this.currentTest.requisites不會改變，如果您這樣做

const tmp = this.currentTest.requisites;
this.currentTest.requisites.push(requisite)
if (tmp === this.currentTest.requisites) {
    console.log('The arrays are the same');
}

您將獲得打印日志。 所以，我建議做這樣的事情：

addrequisite(requisite: Requisite) {
    this.currentTest.requisites.push(requisite);
    this.currentTest.requisites = this.currentTest.requisites.map(item => item);
    console.log('Current test: ');
    console.log(this.currentTest);
}

插入的行將this.currentTest.requisites為具有相同內容的新數組。