如何用Angular Material中的服务数据填充表格？答案

【问题标题】：How to fill a table with data from service in Angular Material?如何用Angular Material中的服务数据填充表格？
【发布时间】：2021-09-19 19:59:10
【问题描述】：

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

来自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>

感谢任何帮助。

【问题讨论】：

什么是 depList ？
@pc_coder 是的，我用正确的变量名编辑了问题

标签： arrays angular typescript web-services mat-table

【解决方案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

【讨论】：

我听从了您的建议，但表格中没有显示数据。数组正确存储了信息，但表格中没有显示任何内容。

【解决方案2】：

Example第一次看到这里

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

并且项目界面不匹配。把名字改成nameItem

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

另一部分是您需要推送而不是分配

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

别忘了在构造函数或 ngOnInit 生命周期中初始化你的 itemList。

this.itemList=[];

【讨论】：

我听从了您的建议，但表格中没有显示数据。我在console.log () 中打印了数组，以查看数据是否保存到数组中。我不知道它是否与表格有关，因为数组正确存储了数据。

【解决方案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 mat-table [dataSource]="dataSource" class="mat-elevation-z8">

【讨论】：