角材料表访问tbody

Question

我在我的一个项目中使用来自@angular/material 的mat-table。我需要访问<tbody>

    <table mat-table matSort [dataSource]="someSource">

      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef>Date</th>
        <td mat-cell *matCellDef="let some">{{some.field}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    </table>

它会生成这样的 HTML：

我的问题是：如何访问tbody 标签来添加一些项目特定的属性？

它不适用于 CSS 样式。否则，它会很简单。我只需要它有attr="value"

Answer 1

您可以执行以下操作。使用ViewChild 和角度生命周期钩子AfterViewInit

工作stackblitz

在模板文件中

<table #testtable mat-table [dataSource]="dataSource"> // --> Observe the template reference variable

    ...

</table>

在 ts 文件中

export class TableBasicExample implements AfterViewInit {
  @ViewChild('testtable', {
    read: ElementRef
  }) tble: ElementRef;

  ngAfterViewInit() {
    this.tble.nativeElement.querySelector('tbody').setAttribute('data-title', 'Sivakumar Tadisetti');
    console.log(this.tble.nativeElement.querySelector('tbody'));
  }
}