html - Angular CDK 表 : Element 'td' cannot be nested inside element 'table'

Question

我正在尝试在 Visual Studio 2017 的 Angular 7 项目中使用 Angular CDK 表。当我按照 here 中的官方代码示例进行操作时它工作完美，但我从 Visual Studio 收到这些警告:元素“td”/“th”不能嵌套在元素“table”内。

下面是引用代码:

    <table cdk-table [dataSource]="masterIds">

      <ng-container cdkColumnDef="name">
        <th cdk-header-cell *cdkHeaderCellDef> Name </th>
        <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Name }} </td>
      </ng-container>

      <ng-container cdkColumnDef="code">
        <th cdk-header-cell *cdkHeaderCellDef> Code </th>
        <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Code }} </td>
      </ng-container>


      <tr class="small" cdk-header-row *cdkHeaderRowDef="['name', 'code']"></tr>
      <tr cdk-row *cdkRowDef="let id; columns: ['name', 'code']" [routerLink]="['./', id]"></tr>

    </table>

知道如何消除这些警告吗？他们在戳我的眼睛。谢谢

更新 这是警告的图片:

还有绿色的曲线:

Answer 1

我刚刚找到了一种“似乎”有效的方法；将所有列定义包装在不可见的 <tr> 中元素，就是这样:

<table cdk-table [dataSource]="masterIds">

  <tr style="display:none!important">
    <ng-container cdkColumnDef="name">
      <th cdk-header-cell *cdkHeaderCellDef> Name </th>
      <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Name }} </td>
    </ng-container>

    <ng-container cdkColumnDef="code">
      <th cdk-header-cell *cdkHeaderCellDef> Code </th>
      <td cdk-cell *cdkCellDef="let id"> {{ ws[id].Code }} </td>
    </ng-container>
  </tr>


  <tr class="small" cdk-header-row *cdkHeaderRowDef="['name', 'code']"></tr>
  <tr cdk-row *cdkRowDef="let id; columns: ['name', 'code']" [routerLink]="['./', id]"></tr>
</table>