角CDK表：元素'td'不能嵌套在元素'table'内

Question

我正在尝试在Visual Studio 2017的Angular 7项目中使用Angular CDK表。当我遵循here中的官方代码示例时，它可以正常工作，但我从Visual Studio中得到了以下警告：元素“ td” /“ th”不能嵌套在元素“表”内。

下面是参考代码：

    <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

th应该在tr内，您应该有类似这样的内容：

<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

---

关于您的最新问题

那是因为Visual Studio编译器本身，您可以搜索How to suppress VS studio compiler warnings（ try this ），和提示：切换到{ {1}}为您的前端开发人员。

Answer 2

我刚刚找到了一种“似乎”起作用的方法。将所有列定义包装在一个不可见的<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>