[英]Data from API not displaying in Angular html template
我正在嘗試通過 API 從后端加載數據並顯示在 html 模板中。 后端 API 正在運行,並且可以在放置時在控制台中看到。 但是在html頁面中,它沒有顯示。
我的組件代碼如下所示,
selectedinstitution: string;
selecteddept: string;
filtertext:string;
public status:boolean=false;
public data= new Array();
institutionalUsers: any;
displayedColumns = [ 'select','username', 'firstname','lastname'];
dataSource = new MatTableDataSource<Element>();
selection = new SelectionModel<Element>(true, []);
ngOnInit() {
this.manageuserService.loadUserListApiMethod()
.subscribe((data:any)=> {
this.dataSource.data=[data];
console.log(data);
});
}
我的 html 模板如下所示,
<!-- .......................... DATA TABLE .............................-->
<div class="table-container mat-elevation-z8" style="margin-top: 10px;" >
<mat-table #table [dataSource]="dataSource">
<!-- Checkbox Column -->
<ng-container matColumnDef="select" >
<mat-header-cell style="max-width:50px;" *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell style="max-width:50px;" *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef> User Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sUsername}} </mat-cell>
</ng-container>
<ng-container matColumnDef="firstname">
<mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sFname}} </mat-cell>
</ng-container>
<ng-container matColumnDef="lastname">
<mat-header-cell *matHeaderCellDef>Last Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sLname}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selection.toggle(row)">
</mat-row>
</mat-table>
<!-- .......................... DATA TABLE PAGINATOR ..........................-->
<div>
<mat-paginator #paginator style="height: 45px;"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>
</div>
</div>
我哪里錯了?
我認為你應該完全重新分配dataSource
而不是改變對象,例如這樣:
subscribe((data: any) => {
const source = new MatTableDataSource<Element>()
source.data = [data];
this.dataSource = source;
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.