我有一个很大的桌子(很多列)。 这就是为什么我要允许用户更改显示的列。 我的想法是将所有列放在 MultiSelect 中。 为了使其工作,我需要知道所有 columnIds 以将它们用作选择选项中的值。 为了使它看起来不错,我需要知道列标题单元格的内容以将它们用作选择选项的显示文本。

这是表的样子。

columns = new FormControl(['name','custom1']);
<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="custom1">
    <th mat-header-cell *matHeaderCellDef>My Custom Column</th>
    <td mat-cell *matCellDef="let element"> {{element.custom1}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columns.value"></tr>
  <tr mat-row *matRowDef="let row; columns: columns.value;"></tr>
</table>

所以我需要的选项数据应该是这样的。

const columnOptions = [{columnId: 'name', columnHeader: 'Name'},{columnId: 'custom1', columnHeader: 'My Custom Column'}]

这样 Select 就可以看起来像这样。

  <mat-select [formControl]="columns" multiple>
    <mat-option *ngFor="let col of columnOptions" [value]="col.columnId">{{col.columnHeader}}</mat-option>
  </mat-select>

正如您在上面看到的columnOptions ,我可以简单地对columnOptions硬编码。 但是由于所有必需的数据都存在于 MatTable 中,我想知道是否有任何方法可以从表格中获取选项。 我一直在向 google 寻求帮助,关于 MatTable 的内容很多,但没有任何内容可以解释如何获取有关列的元信息。

#1楼 票数:0

我建议像您一样在组件中定义columnOptions ,然后使用它在模板中动态创建列。 这样它只在一个地方定义。

<ng-container *ngFor="let column of columnOptions">
  <ng-container [matColumnDef]="column.columnId">
    <th mat-header-cell *matHeaderCellDef>{{ column.columnHeader }}</th>
    <td mat-cell *matCellDef="let element"> {{element[column.columnId]}}</td>
  </ng-container>
</ng-container>

试图走另一条路,从模板中查询列会变得混乱和缓慢。

  ask by Mr.H. translate from so

未解决问题?本站智能推荐:

1回复

角度材料表中仅显示3列

在我的Material表中,我添加了几列,但只显示了 3 列。 但是,我需要显示所有列。 我怎样才能做到这一点 ? 我也在这里分享了我的代码。
2回复

角度材料表仅按最后一列排序

您好,我使用 Angular Material,并尝试使用以下格式在表格数据中显示: 在asks表中有另一个表集合。 我只需要使用这个缩进表的前两个值。 在这种情况下0.068890和22428.508 。 所以我得到了两列,我将其命名为Rate和Quantity 。 数据打印正常,但数据仅按最后一
9回复

在角度5中过滤角度材料表中的特定列

在 Angular material 官网中提到 filterPredicate: ((data: T, filter: string) => boolean) 会根据特定的字段过滤数据。 但不知道如何开始。 我看过例子但没有得到:- https://stackblitz.com/edit/a
1回复

如何从角度材料表中的嵌套json获取数据?-角度

我试图从本地主机获取数据,但是当它出现在不同的结构上时,我无法理解如何获取数据用户的这些数据。 有什么帮助吗? 这就是我试图接近但失败并得到错误错误:找不到 ID 为“_id”的列的方式。 JSON文件 这是我的 servise.ts 文件 这是我的 html 文件 这是我的 component.
1回复

角度材料表-如何更新现有表的列标题?

我正在使用Angular 7,我有一个带有Angular Material Table的简单组件。 通过某些事件,比如鼠标点击,我希望能够更新现有表的数据和标题。 之前: 之后(目标): 目前,我正在获取数据更新。 但是,我无法获取要更新的列的标题文本,除非,即我做了一个
1回复

角度材料表-为动态表中的特定列分配宽度

我有一个动态的角度材料表组件,它的工作原理是这样的: 该组件接受一个列列表,例如: 它有效,但我正在尝试增强它并将width属性发送到其中一列(可以是任何列)。 例如: 如何根据属性调整列宽? 我不想在 CSS 中根据此列标题对类名进行硬编码(因为它不再是动态的)。 请注意,宽度仅适用于特定列。 我
1回复

角度材料表规格

我有一个使用 Angular Material mat-table渲染表格的组件。 它工作正常,但在我的规范文件中,表格没有呈现正文的元素( td s 和tr s),因此测试失败。 似乎我正确地初始化了文本,我导入了MatTableModule ,并且还初始化了mat-table的数据源。 组件获取
4回复

角度材料表内的FormArray

注意:我成功地在经典 HTML 表格中执行 FormArray,如下所示。 我想在 Angular Material 表中有一个 FormArray 并用数据填充它。 我尝试了与经典 HTML 表格相同的方法,但由于错误“找不到 ID 为‘名称’的列”,我无法编译它 我尝试在我的 Angular M