角4材質テーブルがコンパイルされない：予期しない終了タグ

Question

私は材料を使用したAngluar 4プロジェクトに取り組んでいます。私は角度材料からテーブルを実装しようとしています。問題は、テーブルがコンパイルされないということです。

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> 

データソース：

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> ありがとうございました。私はあなたが不足していると思う

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>