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>