角材料表数据源未正确绑定/更新，没有错误但没有任何作用

Posted 2023-03-13

【中文标题】角材料表数据源未正确绑定/更新，没有错误但没有任何作用

【英文标题】：Angular Material Table dataSource not binding correctly/updating, no errors yet nothing works

【发布时间】：2019-01-16 18:30:14

【问题描述】：

检查服务页面时：

<table _ngcontent-c6="" class="mat-elevation-z8 mat-table" fxfill="" 
      mat-table="" matsort="" role="grid" ng-reflect-data-source="[object Object]">

在视图中：

table matSort fxfill mat-table [dataSource]="dataSource" class="mat-elevation-z8"

在控制器/构造器中：

this.dataSource = new MatTableDataSource(this.section1)
this.dataSource.sort = this.sort;

this.service.getSection1().subscribe(data => 
  this.section1 = data;
  console.log(this.section1);
)

我还用一个按钮创建了一个功能，点击时将数据源更改为“BookingId”：“SomethingSomething”，当我点击它时，它可以工作。我确实收到了智能感知错误和其他东西。

我还在其中为 dataSource 添加了 console.log，经检查，“section1”对象中的数据并未添加到 dataSource。

我一直在重复使用以前项目中的很多代码，在此配置下一切正常。

我的控制器中还定义了一个“displayedColumns”对象 + 一个导出的接口模型。

我仅使用 1 行对此进行测试，以确保没有拼写错误或其他导致此问题的小废话。

编辑：

如果我将此添加到点击功能，即使智能感知不喜欢它，数据也会正确添加到表中：

this.service.getSection1().subscribe(data => 
  this.dataSource = data;
  console.log(this.section1)
)

【问题讨论】：

当您在订阅回调中重新分配 this.section1 时，您只是在更改本地变量 - 而不是数据源所拥有的。我会将服务传递到数据源并让数据源订阅并更新它的值。

@fredrik 真的吗？我认为这就是它应该完成的方式，这很奇怪，因为它在其他应用程序中没有问题。我一直在比较两者，在我的一生中，我找不到功能上的差异。我将如何将其传递到数据源中？感谢您的回复和时间！

我刚刚在 this.section1 = data; 之后添加了 this.dataSource = new MatTableDataSource(this.section1)似乎有效，现在我只是对为什么它在其他应用程序中有效感到困惑。

你可以试验一下我的 StackBlitz 数据表。做出改变，看看会发生什么。 stackblitz.com/edit/angular-material-table-with-multi-queries

@Preston 谢谢，那张桌子很不错！绝对有助于在这里和那里进行调整！

【参考方案1】：

我遇到了同样的问题，每次我将鼠标悬停在表格上时，属性ng-reflect-data-source="[object Object]都会添加到表格中。

我注意到我总是用MatTableDataSource 的新实例加载dataSource，类似于this.dataSource = new MatTableDataSource(this.section1)。

分析https://material.angular.io/components/table/overview和代码https://stackblitz.com/edit/angular-material-table-with-multi-queries?file=app%2Fmembers%2Fmembers.component.ts

我注意到 dataSource 实例创建了一次，dataSource: MatTableDataSource = new MatTableDataSource;，它只是更新，类似于this.dataSource.data = this.section1。

进行此更改后，列表在收到数据后立即更新。

【参考方案2】：

我刚刚在 this.section1 = data; 之后添加了 this.dataSource = new MatTableDataSource(this.section1)似乎有效，现在我只是对为什么它在其他应用程序中有效感到困惑。

几天后，我最终用 redux 重建了所有内容，并在我的商店中的数组上使用了 @select() 装饰器，然后在构造函数中订阅了它。这也很好用。