Angular 4 Material 表無法編譯：意外的結束標記

Question

我正在使用 Material 進行 Angluar 4 項目。 我正在嘗試從 Angular Material 實現一個表格。 問題是該表不會編譯。

網址：

<mat-table [dataSource]="dataSource">

  <ng-container matColumnDef "name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef "key">
    <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.Key}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef "reason">
    <mat-header-cell *matHeaderCellDef> reason </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.reason}}</mat-cell>
  </ng-container>

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

</mat-table>

數據源：

  export class ProjectDataSource extends DataSource<any>{
constructor(private project:ProjectComponent){
  super();
}

connect(): Observable<Project[]>{
return this.project.returnDeadProjectList();
}

disconnect(){}

我認為問題與 DataSouce 無關。 但是我仍然在包含多個對象的returnDeadProjectList()中將數組轉換為 Observable。 當我加載頁面時，數組仍然是空的，但它應該仍然有效。

錯誤消息： compiler.js:466 Uncaught Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("me </mat-header-cell> <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> [ERROR ->]</ng-container> compiler.js:466 Uncaught Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("me </mat-header-cell> <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> [ERROR ->]</ng-container> compiler.js:466 Uncaught Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("me </mat-header-cell> <mat-cell *matCellDef="let project">{{project.name}}</mat-cell> [ERROR ->]</ng-container>感謝您的幫助。

Answer 1

我想你失蹤了，

 <ng-container matColumnDef="name">

同樣，

 <ng-container matColumnDef="key">

等等

更新了 HTML 並修復：

<mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="key">
    <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.Key}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="reason">
    <mat-header-cell *matHeaderCellDef> reason </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.reason}}</mat-cell>
  </ng-container>

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

</mat-table>

Answer 2

回答您的新錯誤：

mat-row元素的*matRowDef應該是project但你沒有改變那個。 這就是為什么你會收到那個錯誤。

您的代碼：

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

更新代碼：

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