Угловая таблица CDK: элемент 'td' не может быть вложен в элемент 'table' - PullRequest
Новая
       31

Угловая таблица CDK: элемент 'td' не может быть вложен в элемент 'table'

0 голосов
/ 24 декабря 2018

Я пытаюсь использовать таблицу Angular CDK в проекте Angular 7 в Visual Studio 2017. Когда я следую официальному примеру кода из здесь , он работает отлично, но я получаю следующие предупреждения от 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>

Есть идеи, как избавиться от этих предупреждений?Они тыкают мне в глаза.Спасибо

ОБНОВЛЕНИЕ Вот изображение предупреждений:

enter image description here

И зеленые загогулины: enter image description here

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Я только что нашел способ, который «кажется» работает;оберните все определения столбцов внутри невидимого элемента <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>
0 голосов
/ 24 декабря 2018

A 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 (, попробуйте это ), и подсказку: переключитесь на VsCode для вашего внешнего разработчика.

...