I've been attempting to incorporate mat-table into my Angular 8 project, but I seem to be missing something. The data from my REST endpoint is showing up fine in the console output.
Here's my admin.component.html file:
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No.</th>
<td mat-cell *matCellDef="let data"> {{data.position}} </td>
</ng-container>
<ng-container matColumnDef="USERNAME">
<th mat-header-cell *matHeaderCellDef> USERNAME</th>
<td mat-cell *matCellDef="let data"> {{data.username}} </td>
</ng-container>
<ng-container matColumnDef="BU">
<th mat-header-cell *matHeaderCellDef> BU</th>
<td mat-cell *matCellDef="let data"> {{data.BU}} </td>
</ng-container>
<ng-container matColumnDef="DURATION">
<th mat-header-cell *matHeaderCellDef> DURATION </th>
<td mat-cell *matCellDef="let data"> {{data.duration}} </td>
</ng-container>
<ng-container matColumnDef="PURPOSE">
<th mat-header-cell *matHeaderCellDef> PURPOSE</th>
<td mat-cell *matCellDef="let data"> {{data.remarks}} </td>
</ng-container>
<ng-container matColumnDef="apr">
<th mat-header-cell *matHeaderCellDef> Approve</th>
<td mat-cell *matCellDef="let row" >
<mat-checkbox >Approve</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="rej">
<th mat-header-cell *matHeaderCellDef> Reject</th>
<td mat-cell *matCellDef="let row" >
<mat-checkbox >Reject</mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<button mat-button color="primary" (click)="OnApprovalSubmit()">Submit</button>
And here's my ts file:
export interface UserData{
position:number;
username:any;
BU:any;
duration:any;
remarks:string;
}
@Component({
selector: 'app-admin',
templateUrl: 'admin.component.html',
styleUrls: ['./app.component.css']
})
export class AdminComponent implements OnInit{
displayedColumns: string[] = ['position','USERNAME', 'BU', 'DURATION', 'PURPOSE','apr','rej'];
USER_DATA:any;
constructor(public testService : TestService){}
ngOnInit(){
this.testService.getUserAccessDetails().subscribe(data =>{
console.log(data);
this.USER_DATA=data.USER_DATA;
console.log(this.USER_DATA);
})
}
dataSource = new MatTableDataSource<UserData>(this.USER_DATA);
selection = new SelectionModel<UserData>(true, []);
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
checkboxLabel(row?: UserData): string {
if (!row) {
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
}
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
}
}
When I check the console, the data is displayed in the following format:
USER_DATA: Array(1)
0: {position: "01", username: "Name", BU: "Team", Duration: 3, remarks: "NA"}
However, I am not seeing any rows rendered without any errors. Any assistance on this issue would be greatly appreciated.