Angular 材料 2：如何区分一个组件中的 2 个或多个可排序表？

Posted 2023-02-22

【中文标题】Angular 材料 2：如何区分一个组件中的 2 个或多个可排序表？

【英文标题】：Angular material 2: How to distinguish 2 or more sortable tables within one component?

【发布时间】：2018-03-07 09:35:23

【问题描述】：

尊敬的 *** 社区，

根据 Angular 材料 2 文档，您可以在表格中添加 mdSort 指令：

排序

使用 mdSort 指令并添加排序 UI 表的列标题。排序标头发出可以使用的事件 通过表的数据源触发更新。

代码：component.html

使用 mdSort 指令和 md-sort-headers

<md-table fxFlex="100%" #table [dataSource]="dataSource" mdSort>

              <ng-container mdColumnDef="category">
                <md-header-cell *mdHeaderCellDef md-sort-header> Category </md-header-cell>
                <md-cell (click)="alert(element)" *mdCellDef="let element"> element.category </md-cell>
              </ng-container>
             ...
             ...
</md-table>

代码：component.ts

引用排序指令：

 @ViewChild(MdSort) sort: MdSort;

在数据源中注入它：

this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort);

并使用它对对象进行排序：

getSortedData(): Task[] 
const data = this._exampleDatabase.data.slice();
if (!this._sort.active || this._sort.direction === '')  return data; 

return data.sort((a, b) => 
  let propertyA: number|string|boolean = '';
  let propertyB: number|string|boolean = '';

  switch (this._sort.active) 
    case 'category': [propertyA, propertyB] = [a.category, b.category]; break;
    case 'task': [propertyA, propertyB] = [a.task, b.task]; break;
    case 'favorite': [propertyA, propertyB] = [a.favorite, b.favorite]; break;
  

  let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
  let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

  return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
);

现在我想要另一个可排序的表，并且我已经创建了另一个数据源、数据库等。

但是如何区分 mdSort 指令呢？

【参考方案1】：

使用指令中的exportAs-attribute 绑定到指令，请参阅此内容以供参考：Angular 2: Get reference to a directive used in a component

这不适用于您的示例，因为您使用的是第三方库并且 MdSort 没有 exportAs-property

---

如果你想绑定到组件，你可以使用这样的标签给每个表一个唯一的 ID：

<md-table fxFlex="100%" #table1 [dataSource]="dataSource1" mdSort>
</md-table>
<md-table fxFlex="100%" #table2 [dataSource]="dataSource2" mdSort>
</md-table>

然后你可以像这样获得唯一的孩子：

@ViewChild('table1') table1: MdTable;
@ViewChild('table2') table2: MdTable;

【讨论】：

它对我不起作用。如果我使用：@ViewChild('table1') sort: MdSort; 而不是 @ViewChild(MdSort) sort: MdSort; 我的代码不起作用

您必须相应地将模板中的主题标签从表更改为表1。查看我的答案的第一个代码块

如果我将<md-table fxFlex="100%" #table1 [dataSource]="dataSource1" mdSort> </md-table> 与@ViewChild('table1') table1: MdSort; 一起使用，它会开始出现错误：html 选择器上的ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

我更改了示例中的 [dataSource]，因为我认为您想为每个表使用不同的数据。您需要将 [dataSource]="dataSource1" 改回 [dataSource]="dataSource"

首先感谢大家的帮助，但是我确实有2个数据源，我命名了第一个dataSource和第二个orderDataSource