问题标签 [angular-material-table]

Is there a way to update an Angular Material table's datasource (rows) according to the changes that have been made by drag and drop on the columns?

I have a dropListedDrop event which updates columns:

But the data in dataSource isn't being changed automatically after the drag and drop action completes.

Example here: StackBlitz

我正在尝试在 mat 表中显示来自 api 的一些数据。但是，即使我可以在控制台中看到数据，它也不会显示在 mat 表中。控制台没有显示有关 mat 表的错误，并且列的标题正确显示。

我已经尝试在加载组件的其余部分之前使用 async 关键字来获取其余的 api 数据。

这是我的组件

这是html模板

如果需要更多信息，请告诉我，我是 StackOverflow 的新手

我正在尝试使 mat-cell 可单击并在 mat-dialog 内显示表单字段，并用 mat-cell 内的数据填充这些字段。

那是我拥有的当前显示，但我希望它位于单击它的 mat-cell 旁边。

这是stackblitz中的代码。 https://stackblitz.com/edit/angular-akbfr8

任何帮助都可以。谢谢。

我有一个奇怪的场景，我正在显示客户名字和姓氏的角度材料表。有一个“添加客户按钮”会弹出一个模式以在其中添加新客户。当您单击提交时，它会将客户添加到客户数组并更新表。但是，这只会在您第一次这样做时发生。随后的尝试无济于事。客户数组不断更新，但数据源绑定到数据服务的 Observable 似乎与它分离并保持相同的数组（它仅在第一次更新）。不确定我在这里做错了什么，因为这是我第一次尝试 Angular 7。任何帮助将不胜感激，这已经让我发疯了大约一个小时。

数据服务.ts

ICustomer.ts //客户界面

客户数据表.ts

add-customer-modal.ts

更新：

一个简单的改变就解决了这个问题......

在 data-service.services.ts 的 addCustomers 方法中，我注释掉了以下行：

现在它可以按我的需要工作......我想这是有道理的，因为它每次都创建一个新对象而不是使用同一个对象。

我正在研究 Angular Material 表的过滤功能。

我正在尝试开发的过滤功能是，用户可以输入以下字段：名字、姓氏、电子邮件、用于选择品牌的多选下拉菜单和用于根据所选/输入值进行过滤的搜索按钮。

我使用的 Angular 版本是 8。

我的数据结构如下：

我想要实现的是过滤上述作为数组出现的内容并在表格上显示数据。

至今没有成功。任何帮助表示赞赏

我查找并尝试过的一些示例如下： https ://stackblitz.com/edit/angular-material-table-multiple-filter-ttewos https://stackblitz.com/edit/angular-hbakxo-xctfqy ?file=app/table-filtering-example.ts

我正在尝试将静态文件中的数据绑定到 Angular Material 中的 mat-table 组件。

问题。

并非所有数据都显示在相应的行中，只是其中的一部分。

结果

组件 TS

组件 HTML

数据源

表单验证器的一些话：

该应用程序使用 Angular 6 版本，基于 Material Design，客户非常喜欢。此外，我们使用动态渲染依赖于后端 api。

当用户被编辑时，我正在尝试更新我的数据表。

目前，数据源已更新，但在前面部分看不到更改。我的意思是，我的console.log(this.dataSource)表演数据很好。但在网页上并非如此。

这是我获取数据源 (ngOnInit) 的方法：

这是我的update功能：

解决方案

我需要调用renderRows()函数。

所以我在我的桌子上添加了一个参考，比如：<table mat-table #table [dataSource]="dataSource">

然后我声明一个@ViewChild属性@ViewChild('table', { static: true }) table: MatTable<any>;

然后 ：

我已经搜索了，我已经搜索了，我已经搜索了，我找不到这个问题的答案。

我正在使用 Angular Firestore 来获取数据（尝试了snaphotChanges和valueChanges）。该代码有效。

但是，如果后端的数据发生变化，UI 上的材料表行只会在我显示所有数据或禁用分页时自动刷新。但是，当启用分页时，UI 会显示数据已更新，但它不会刷新单元格值，直到我将光标移动到行上以强制刷新。我不知道这是一个错误还是我做错了什么。

我制作了一个视频来展示发生了什么：https ://youtu.be/SN6EFc6Vqm8

无论长度 > pageSize 与否，UI 都应该使用新数据刷新。

我正在尝试在角度材料表中显示数据，这里是获取从 API 获取数据的请求

这是我想显示来自 API 的数据的 html 文件

我正在尝试获取表的实例，以便在更新数据源时使用 renderrows() 函数。

我已经尝试过使用@ViewChild 来完成它，但无论我做什么它都是未定义的。

组件.ts：

.html：