Not sure if it's because I'm creating this project from zero using Angular Material 10 and I haven't worked with it yet and it works differently or if it's because I'm just doing something wrong, but the mat-table is literally not even showing on my page right now, and I've never had it happen before.
Table code:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let row">
<button (click)="edit(row.id)">EDIT</button>
<button (click)="delete(row.id)">DELETE</button>
</td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef>Status</th>
<td mat-cell *matCellDef="let row">{{ row.status }}</td>
</ng-container>
<ng-container matColumnDef="browser">
<th mat-header-cell *matHeaderCellDef>Weight</th>
<td mat-cell *matCellDef="let row">{{ row.browser }}</td>
</ng-container>
<ng-container matColumnDef="origin">
<th mat-header-cell *matHeaderCellDef>Symbol</th>
<td mat-cell *matCellDef="let row">{{ row.origin }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
DataSource init + displayedColumns:
displayedColumns: ['actions', 'status', 'browser', 'origin'];
dataSource = [];
length = 100;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];
constructor(private logService: LogService, private dialog: MatDialog) {}
ngOnInit(): void {
this._loadData();
}
private _loadData(): void {
const params = { size: this.pageSize, pageIndex: 0 };
this.logService.loadData(params).subscribe((res) => {
this.dataSource = res.content;
});
}
Request is working properly, and the object is properly fed the info from it, it's just the table not appearing...
The MatTableModule is properly imported into the project.
I've also tried literally copy pasting the code from the Angular Material stackblitz but it doesn't work either.
