Я использую реактивную модель и угловой материал. Я хочу отобразить таблицу матов ученика. Я привязываю значения, жестко запрограммированные к таблице. Но это не работает.
Я точно попробовал пример углового материала.
user.html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="sno">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.sno}} </td>
</ng-container>
<ng-container matColumnDef="sname">
<th mat-header-cell *matHeaderCellDef> Student Name </th>
<td mat-cell *matCellDef="let element"> {{element.sname}} </td>
</ng-container>
<ng-container matColumnDef="age">
<th mat-header-cell *matHeaderCellDef> Age </th>
<td mat-cell *matCellDef="let element"> {{element.age}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
user.ts
export class ListComponent implements OnInit {
displayedColumns: string[] = ['sno', 'sname', 'age'];
dataSource : MatTableDataSource<Student>;
ngOnInit() {
this.getStudList();
}
getStudList(){
const ELEMENT_DATA: Student[] = [
{sno: 1, sname: 'durga', age: 26},
{sno: 2, sname: 'gauri', age: 25},
{sno: 3, sname: 'laxmi', age: 24},
];
this.dataSource = new MatTableDataSource(ELEMENT_DATA);
}
}
Это дает мне dataSource не является свойством mat-table.