Angular MatTable报错：数据源不匹配数组/Observable/DataSource求助

通过MongoDB集合的聚合查询获取数据生成报表，在Angular中使用MatTable时遇到上述错误。

数据库返回数据 #

{
  vitems: [
    { itemQty: -19, count: 3, itemCode: '333.5.23' },
    { itemQty: -24, count: 4, itemCode: '113.77.33' },
    { itemQty: -28, count: 5, itemCode: '77.34.565' },
    { itemQty: -18, count: 3, itemCode: '7611' }
  ]
}

TS文件代码 #

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MasterService } from '../master.service';
import { MatTableModule, MatTable, MatTableDataSource} from '@angular/material/table'
import { environment } from '../../environments/environment.development';
import { VItem } from '../vitem';


interface Nitem {
              itemQty : number,
              count : number,
              itemCode : string
}


@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrl: './stock.component.css'
})
export class StockComponent implements OnInit{

  masterUrl = environment.domain + 'invoices/stock';
  stockItems : Nitem[];
  displayedColumns: string[] = ['itemCode', 'itemQty'];
  
  @ViewChild(MatTable, {static:true}) table!: MatTable<any>;
  
  constructor(private masterService : MasterService){}

  ngOnInit(): void {
    this.masterService.getMasters(this.masterUrl)
    .subscribe(data => {
      this.stockItems = data;
    });
  }
  
}

HTML文件代码 #

<div  class="container text-center">
          
    <table mat-table [dataSource]="stockItems" #mytable class="my-table mat-elevation-z8">
      
      <ng-container matColumnDef="itemCode">
        <th mat-header-cell *matHeaderCellDef> Item Code</th>
        <td mat-cell *matCellDef="let element"> {{element.itemCode}} </td>
      </ng-container>
  
      <ng-container matColumnDef="itemQty">
        <th mat-header-cell *matHeaderCellDef> Stock</th>
        <td mat-cell *matCellDef="let element"> {{element.itemQty}} </td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  
  </div>

解决方案 #

1. 修正数据赋值逻辑 #

报错核心原因是后端返回的是包含数组的对象，但代码直接将整个对象赋值给了stockItems，MatTable要求数据源必须是数组、Observable或DataSource类型。

修改ngOnInit中的赋值逻辑，提取对象里的vitems数组：

ngOnInit(): void {
  this.masterService.getMasters(this.masterUrl)
  .subscribe(data => {
    // 提取vitems数组赋值给stockItems
    this.stockItems = data.vitems;
  });
}

2. 推荐使用MatTableDataSource（可选） #

如果需要使用MatTable的筛选、分页、排序等功能，建议使用MatTableDataSource封装数据：

修改TS代码：

// 新增数据源定义
dataSource = new MatTableDataSource<Nitem>();

ngOnInit(): void {
  this.masterService.getMasters(this.masterUrl)
  .subscribe(data => {
    this.dataSource.data = data.vitems;
  });
}

修改HTML代码：

将[dataSource]绑定改为dataSource：

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

这样既解决了报错问题，也能更好地利用MatTable的内置功能。

内容的提问来源于stack exchange，提问作者Manickam Parameswaran