如何用 Angular Material 中的服务数据填充 table？

Question

我正在尝试使用服务返回的信息创建 table。问题是唯一显示的行是服务返回的列表中的最后一行。

代码来自 list.component.ts

import { Component, OnInit } from '@angular/core';
import { DepartamentoService } from '../../_service/departamento.service';

export interface Items{
   idItem: number;
   nameItem: string;
}

@Component({
   selector: 'app-list',
   templateUrl: './list.component.html',
   styleUrls: ['./list.component.css']
})

export class LoginComponent implements OnInit {

     displayedColumns: string[] = ['idItem', 'nameItem', 'options'];
     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>
         <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
     </ng-container>

     <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
     <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

感谢任何帮助。

Answer 1

您以错误的方式将值分配给 itemList 变量。你在做：

this.itemList = [{idItem: element.idItem, nameItem: element.nameItem}];

这有什么问题是循环的每次迭代都只将一行重新分配给 itemList 变量，您需要在每次迭代中为每个迭代推送一个值以显示所有行。

您需要这样做：

this.itemList.push({idItem: element.idItem, nameItem: element.nameItem};

一定要这样声明物品清单：

itemList: any[] = []; // add a empty array as first value to be able to use the push() method

Answer 2

Example第一次看到这里

 displayedColumns: string[] = ['idItem', 'name', 'options'];

和Items界面不匹配。将名称更改为 nameItem

 displayedColumns: string[] = ['idItem', 'nameItem', 'options'];

另一部分是你需要推送它而不是赋值

this.itemList.push({idItem: element.idItem, nameItem: element.nameItem};

并且不要忘记在构造函数或 ngOnInit 生命周期中初始化您的 itemList。

this.itemList=[];

Answer 3

答案中提供的信息有效，但我不得不添加另一个步骤：

export class LoginComponent implements OnInit {

 displayedColumns: string[] = ['idItem', 'nameItem', 'options'];
 columnsToDisplay: string[] = this.displayedColumns.slice();
 itemList: Items[];
 dataSource = []; // create a new array
 
 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; // assign the array with the data to the new one
 });
}

您必须使用新数组的名称更改 table 中的数据源：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

如何用 Angular Material 中的服务数据填充 table？

How to fill a table with data from service in Angular Material?

arrays

web-services

typescript

angular

mat-table