角材料找不到列

Question

我有以下代碼，但我無緣無故地收到此錯誤：

ERROR 錯誤：找不到 ID 為“大洲”的列。

我已經添加了顯示列部分，所以我不確定為什么會出現此錯誤。

   <div class="example-container mat-elevation-z8">
   <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="continentName">
      <mat-header-cell *matHeaderCellDef>continentName </mat- 
    header-cell>
      <mat-cell *matCellDef="let country"> {{country.continentName}} </mat-cell>
    </ng-container>
        <ng-container matColumnDef="countryName">
          <mat-header-cell *matHeaderCellDef>countryName </mat-header-cell>
          <mat-cell *matCellDef="let country"> {{country.countryName}} </mat-cell>
        </ng-container>
            <ng-container matColumnDef="areaInSqKm">
              <mat-header-cell *matHeaderCellDef>areaInSqKm </mat-header-cell>
              <mat-cell *matCellDef="let country"> {{country.areaInSqKm}} </mat-cell>
            </ng-container>
                <ng-container matColumnDef="population">
                  <mat-header-cell *matHeaderCellDef>population </mat-header-cell>
                  <mat-cell *matCellDef="let country"> {{country.population}} </mat-cell>
                </ng-container>

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


    @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
   })
   export class AppComponent implements OnInit {
   title = "my-case-study";
   displayedColumns = 
   ['continentName','countryName','areaInSqKm','population'];
   dataSource = new MatTableDataSource([]);

Answer 1

你忘記了 th 和 td “mat-h​​eader”和“mat-cell”是“th”和“td”的指令，例如

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

你只寫

<ng-container matColumnDef="continentName">
   <!--here missing "th"-->
  <mat-header-cell *matHeaderCellDef>continentName </mat- 
header-cell>
  <!--here missing td-->
  <mat-cell *matCellDef="let country"> {{country.continentName}} </mat-cell>