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

Question

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

我正在使用 Angular 6 开发一个简单的应用程序，以跟踪软件要求以及与这些要求相关的测试。

• 我有一个名为 RequisiteList 的组件，它的 HTML 部分包含在一个 mat-table 中，其中包含我自己的 Requisite 模型类的数组作为 [dataSource] .该数组作为@Input 参数接收，它还有一个@Output 参数，它是一个EventEmitter，每次单击列表上的Requisite 时都会通知并传递给父组件。

• 我在 ReqListMain 内部使用了 RequisiteList，它是一个由列表组成的组件和用于过滤的层次树。该组件工作正常，按预期显示和过滤必需品。该组件还捕获列表的@Output 事件并将其作为@Output 传递给其父级。

• 最后（关于它与这个问题的关系），我有一个 TestView 组件，它有一个 RequisiteList 的实例来显示当前与当前测试，以及 ReqListMain 的实例，以向当前测试添加新的先决条件（如“浏览器”）。这个 TestView 有一个模型类 Pectest 的实例，对应于当前正在可视化的测试，它有一个 Requisite 数组。 p>

最后一个组件的想法是，只要单击“浏览器”列表的必要条件，它就会被添加到当前测试的列表中。为了做到这一点，在与浏览器列表的@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 对象的内容，并且我验证单击的必备项实际上已添加到该对象的必备项数组中，因此事件触发并传递了对象子组件向上。

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