我試圖用從一個服務中回傳的資訊創建一個表。問題是，顯示的唯一一行是服務回傳的串列中的最后一行。
代碼來自 list.component.ts
import { Component, OnInit } from '@angular/core'。
import { DepartamentoService } from '././_service/departamento.service'。
export 介面 Items{
idItem: 數字。
nameItem: string;
}
@Component（{
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class LoginComponent 實作 OnInit {
displayedColumns: string[] = ['idItem'/span>, 'nameItem'/span>, 'options'/span>];
columnsToDisplay: string[] = this.displayedColumns.slice() 。
itemList: Items[];
constructor(private itemService: ItemsService) { }
ngOnInit（）。void {
this.itemService.list（）。 subscribe(data => {
data.forEach(element => {
this.itemList = [{idItem: element. idItem, nameItem: element.nameItem}] 。
console.log(`Id: ${element.idItem} - Name ${element.nameItem}`）。)
});
});
}
}
代碼來自list.component.html
<table mat-table [dataSource]="itemList" class="mat-elevation-z8">
< ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns" >
< th id="head" mat-header-cell *matHeaderCellDef> {{column}}. </th> {{column}}
<td mat-cell *matCellDef="let element">/span> {{element[umn]}}. </td> {{element[column]}}.
</ng-container>/span>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"/span>> </tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>>
</table>
希望得到任何幫助。
uj5u.com熱心網友回復：
你正在以錯誤的方式向 itemList 變數賦值。 你的做法是：
this.itemList = [{idItem: element。 idItem, nameItem: element.nameItem}] 。
這樣做的錯誤之處在于，在回圈的每一次迭代中，你都只給 itemList 變數重新分配了一條記錄，你需要在每一次迭代中推送一個值，以便顯示所有的記錄。
你需要這樣做：
this.itemList。 push({idItem: element.idItem, nameItem: element.nameItem};
一定要這樣宣告專案串列：
itemList: any[] = []; //加入一個空陣列作為第一個值，以便能夠使用push()方法。
uj5u.com熱心網友回復：
示例首先我在這里看到
displayedColumns: string[] = ['idItem'/span>, 'name'/span>, 'options'/span>]。
和Items介面不匹配。將name改為nameItem
displayedColumns: string[] = ['idItem'/span>, 'nameItem'/span>, 'options'/span>]。
另一部分是，你需要推送它，而不是分配
this.itemList。 push({idItem: element.idItem, nameItem: element.nameItem};
并且不要忘記在建構式或ngOnInit生命周期中初始化你的 itemList。
this.itemList=[] 。
uj5u.com熱心網友回復：
答案中提供的資訊是可行的，但我不得不再增加一個步驟：
export class LoginComponent 實作OnInit {
displayedColumns: string[] = ['idItem'/span>, 'nameItem'/span>, 'options'/span>];
columnsToDisplay: string[] = this.displayedColumns.slice() 。
itemList: Items[];
dataSource = []; //創建一個新陣列。
constructor（private itemService: ItemsService） { }
ngOnInit()。void {
this.itemService.list（）。 subscribe(data => {
data.forEach(element => {
this.itemList = [{idItem: element. idItem, nameItem: element.nameItem}] 。
console.log(`Id: ${element.idItem} - Name ${element.nameItem}`）。)
});
this.dataSource = this。 itemList; //將有資料的陣列分配給新的陣列。
});
}
你必須用新陣列的名稱來改變表中的資料源：
<table mat-table [dataSource]="dataSource" class="mat-levation-z8">
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/329077.html
標籤：
上一篇：如何根據自定義條件過濾串列？