问题标签 [angular-material-table]

I'm trying to implement drag n' drop into my project, but are a little stumped as to how to begin. In Angular 7 we now have the cdkDragDrop, which seems very promising. However, all the examples are based on one or more lists/divs. I would like to use it with two material tables - is this even possible? Are there any other examples out there, other than the ones at Angular Material?

我可能很愚蠢，但据我所知，下面的代码应该完全遵循角度材料网站的示例。但是，排序结果不正确。

我可以看到排序发生了，因为顺序改变了。第 xxx50 行成为第一行。第 xxx01 行移动到 xxx50 的原始位置。其余数据按原始顺序。asc 和 des 产生相同的顺序。

请告诉我我做错了什么。

html:

ts：

我在我的 Angular 7 项目中使用材料表。

我有一个显示多个对象的表。

每个对象都有一个属性“促销次数”，我想使用数字范围（小于 5、从 6 到 10、从 11 到 20、大于 20）过滤此表。

这是 dataSource.filterPredicate 的一个示例，我曾经在我的表上使用自定义过滤器，但我不知道如何管理我之前解释的那个...

我的情况：我有一个下拉列表和下拉列表下方的表格。为了便于理解，假设下拉列表是城市，下表显示了详细的城市列表。当用户在下拉列表中选择一个城市时，该城市的行必须成为表中的第一行。我知道如何更改底层数据结构/数组以查找并插入替换数组中的第一项。完成之后，我到底如何让表格刷新，所以它现在显示该行在顶部？使用基本示例，当某个按钮单击此 stackblitz 时，我如何让第 5 行硼显示在第一行。https://stackblitz.com/angular/epkqlvvjdqn?file=app%2Ftable-basic-example.ts

连续几天我试图从通过 HTTP 检索到的数据创建一个动态 mat-table。到目前为止，一切都很好。我以这个stackblitz为例。

在模板中，表格是这样生成的..

现在，我有一个问题。我希望能够在将它们放在桌子上之前对我检索的数据进行建模。例如，查看这个 stackblitz 数据，我希望能够合并两列“已创建”和“状态”以将它们显示在一个名为“状态”的列中

或者例如，我想在不使用 | 之前修改日期格式 模板中的日期管道。

前：

后：

所有这些努力都是为了能够创建一个表服务，我将在其中传递 API 和表配置，因此基于该配置，将呈现表......有谁知道我应该如何处理这个问题？

我是 angular 新手...我的 mat-table 工作正常，但是当列具有过滤和排序功能时，排序箭头在带有过滤器的列上不可见。我试图调整柱重量，但无论柱子有多大或多小，箭头都是不可见的。有一个示例项目可以重现我的问题。

https://stackblitz.com/edit/angular-hbakxo-sdjyya?file=app%2Ftable-filtering-example.ts

我正在尝试使用分页器、排序等实现 Material DataTable 的 DataSource。此处描述了一个实现示例：https ://blog.angular-university.io/angular-material-data-table/

从服务我得到以下模型：

服务中的方法如下所示：

数据源实现：

在subscribe(obj => this.flatSubject.next(obj))我收到以下错误：IResult is not assignable to type Flat[]。obj投射到时我没有错误<Flat[]>obj，我也看到这是后端返回数据但导致 UI 为空。我认为这里的错误，subscribe(obj => this.flatSubject.next(<Flat[]>obj))但不知道它是如何解决的。我在做什么？

我以不同的方式实现了一个数据源。实现如下：

它有效，但在我的情况下不匹配。

我正在尝试使 angular material 6 flex table 的各个列可以调整大小。我在我分配的列宽中使用了一种方法调整大小，但是当我尝试调整一列的大小时，所有列都在调整大小。这是stackblitzlink。

这是调整大小的方法代码

下面是表格html代码。

请帮助我解决此问题，如果我在实施此问题时出错，请纠正我并指导我如何显示调整大小图标。提前致谢。

我有一个角度材料表，它使用 detailRow 指令将详细信息/兄弟相邻行插入到表行中。

StackBlitz

我想让它看起来好像行正在展开或折叠，所以我添加了几个图标，这些图标在单击包含它们的单元格时切换。

但是，如果我将行展开并分页或进行排序，则图标不会切换，因为无法切换它们。

我尝试过加入page事件或sortChange事件，但结果是空的。

我知道有一种新的方法可以在角度材料 v7 中进行扩展/折叠，这可能适用于分页和排序，但在我升级之前还需要一段时间，同时有人对如何解决这个问题有任何想法。

我在使用 Angular 材料表（Angular 材料表）时遇到问题

我跑来ng generate @angular/material:material-table --name=car-table生成默认的角度表，它工作正常。但是，如果我尝试将数据（汽车）注入它，CarsTableDataSource它就会停止工作。它必须与异步函数和ngOnInit生命周期挂钩相关。

您可以在StackBlitz中查看代码。关键部分在src/app/cars/文件夹中。

汽车.component.ts

汽车表datasource.ts

汽车.component.html

问题在于ngOnInit和

作为我得到的错误ERROR TypeError: Cannot read property 'cars' of undefined，这意味着dataSource在解析模板时未定义，但函数ngOnInit：

打印出来：

该页面仍会加载所有内容，但我不能例如通过该方法添加汽车，因为它们确实会添加到数据库中，但不会在视图中更新，尽管this.table.renderRows()如文档中所述调用：

由于该表针对性能进行了优化，因此它不会自动检查数据数组的更改。相反，当在数据数组上添加、删除或移动对象时，您可以通过调用其renderRows()方法来触发对表的呈现行的更新。

我尝试ngOnInit使用Observables 而不是 s async/await，但它也不起作用：

如果我不做任何数据库获取 中的东西ngOnInit，那么就没有任何错误。

add()如前所述，我现在也无法添加任何汽车。

如果您需要任何其他信息 - 请随时问我，我会尽快回复。

编辑

如果我将代码编辑为如下所示：

错误的顺序更改为：

这意味着错误发生在

我已经尝试过使用 a.subscribe()并在该块中执行所有操作，但那里没有运气。

编辑 2

如here（stackoverflow）所述，您必须dataSource使用空白对象初始化，因为在所有微任务完成之前解析视图ngOnInit。在视图初始化之后初始化分页器。

现在它可以工作了，但这有点像黑客。我不知道为什么，但是每当 Angular 的生命周期钩子中的异步代码在哪里时，钩子都会在异步代码完成之前完成。我不知道为什么。在它看到await它之后立即退出该函数，并且只有在那之后才被dataSource初始化。我真的很感激解释。

编辑 3

另一种解决方法是在视图中添加空条件运算符，如下所示：

有了这条线：

由于视图是在 ngOnInit 完成一半时执行的，因此您必须在使用该属性的任何地方添加它，以便在解析视图时它不会进入最终的 html。

编辑 4

我更新了 Stackblitz 应用程序的链接，现在它尽可能简约地代表问题。