В чем разница?

Question

Я учусь сейчас Angular и Angular Материал. На веб-сайте Angular Material есть пример того, как построить таблицу.

Если я сделаю это сам, написано, это тоже не сработает. Это будет выглядеть, поскольку у меня нет половины css стилей. https://material.angular.io/components/table/examples

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

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

Но если я поменяю его на это, он будет выглядеть уже хорошо.

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

И я еще не понял, как я могу использовать кнопки со стилями css. Может быть, я что-то пропустил.

Спасибо!

Answer 1

mat-table отображает таблицу, поэтому

<mat-table />

становится

<table /> <-- material table

Но table mat-table отображает таблицу, внутри таблицы

<table mat-table />

становится

<table> <-- your parent element
  <table /> <-- material table
</table>

то же самое для th, tr, ... et c