Currently, I am working on an Angular 4 Project that involves using Material. The main task at hand is to implement a table from Angular Material. However, the issue I am facing is that the table does not compile as expected.
Here's the HTML code snippet I'm using:
<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>
And this is the DataSource being used:
export class ProjectDataSource extends DataSource<any>{
constructor(private project:ProjectComponent){
super();
}
connect(): Observable<Project[]>{
return this.project.returnDeadProjectList();
}
disconnect(){}
From my understanding, the problem doesn't seem related to the DataSouce. Although, I have converted an array to an Observable in the returnDeadProjectList() function which holds multiple objects. Despite this, when I load the page, the array remains empty even though it should still function correctly.
Here's the error message received:
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>