[英]Angular 4 Material table wont compile: Unexpected closing tag
I am working on a Angluar 4 Project with Material.我正在使用 Material 进行 Angluar 4 项目。 I am trying to implement a table from Angular Material.我正在尝试从 Angular Material 实现一个表格。 The Problem is that the table wont compile.问题是该表不会编译。
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>
DataSource:数据源:
export class ProjectDataSource extends DataSource<any>{
constructor(private project:ProjectComponent){
super();
}
connect(): Observable<Project[]>{
return this.project.returnDeadProjectList();
}
disconnect(){}
I dont think the problem has to do with the DataSouce.我认为问题与 DataSouce 无关。 But still i am converting an array to an Observable in the returnDeadProjectList()
that contains multiple objects.但是我仍然在包含多个对象的returnDeadProjectList()
中将数组转换为 Observable。 When I load the page the array is still empty but it should still work.当我加载页面时,数组仍然是空的,但它应该仍然有效。
Error message: 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>
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>
Thanks for the help. 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>
感谢您的帮助。
I think you are missing ,我想你失踪了,
<ng-container matColumnDef="name">
similarly,同样,
<ng-container matColumnDef="key">
etc等等
Updated HTML with fix:更新了 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 for your new error:回答您的新错误:
mat-row
element's *matRowDef
should be project
but you didn't change that one. mat-row
元素的*matRowDef
应该是project
但你没有改变那个。 That's why you getting that error.这就是为什么你会收到那个错误。
Your code:您的代码:
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; column: displayedColumns;"></mat-row>
Updated code:更新代码:
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let project; column: displayedColumns;"></mat-row>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.