Question

我有几个 MatTable 组件是由* ngFor动态生成的：

<div *ngFor="....">
  <table mat-table [attr.data-table-id]="someId" >
    ....
  </table>
  .....
</div>

现在，在组件的类文件中，我想找到特定的MatTable参考。我已经在组件类中定义了一个属性：

@ViewChildren(MatTable) tables: QueryList<MatTable>;

现在，我对所有MatTable都有参考。但我想找到一个特定的MatTable，例如具有特定属性的MatTable（例如data-table-id = 12）。我怎样才能访问每个MatTable的coresponding DomElement？如果我可以引用组件的相应DomElement，则可以读取该元素的属性并找到所需的组件（MatTable）。

Answer 1

您可以使用基本的HTML id标记，并通过以下方式进行访问：

  <table mat-table id="myId" [attr.data-table-id]="someId" >
    ....
  </table>

在组件中：

@ViewChildren(MatTable, {read: ElementRef}) public tables: QueryList<ElementRef>;

let theTableIWant: ElementRef = this.tables.find((el: ElementRef) => el.nativeElement.id === myId);

Answer 2

使用QueryList对象的filter方法：

let table = tables.filter(elRef => elRef.nativeElement.dataset.tableId === 12)[0];

if (table !== undefined) {
  // your logic
}

将其他数据附加到角度分量

2 个答案: