材料表不反映数据源的更改

Question

这是我在Stack Overflow中的第一个问题。我会尝试具体但我不知道如何保持这个简短，所以这将是一个很长的帖子。对于那个很抱歉。我保证在搜索之前我搜索并尝试了很多东西，但我现在有点迷失了。

我正在Angular 6中开发一个简单的应用程序来跟踪软件必需品和与这些必要条件相关的测试。

• 我有一个名为RequisiteList的组件，其HTML部分包含一个mat表，其中包含一个我自己的Requisite模型类的数组作为[dataSource]。此数组作为@Input参数接收，并且还有一个@Output参数，该参数是一个EventEmitter，每次单击列表上的Requisite时，都会通知并传递给父组件。
• 我在ReqListMain中使用了RequisiteList，它是一个包含在列表中的组件和一个用于过滤的分层树。此组件工作正常，显示和过滤所需的必要条件。此组件还捕获列表的@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对象的内容，并且我验证单击的必需品实际上已添加到该对象的requisites数组中，因此事件触发并且子组件向上传递对象。

我不确定我的问题是数据绑定是否由值构成（我不这么认为，因为我绑定了一个数组，这是一个对象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成为具有相同内容的新数组。