Angular:材料表转换材料表的API数组

import { Component } from '@angular/core';

@Component({
  selector: 'app-material-table',
  templateUrl: './material-table.component.html',
  styleUrls: ['./material-table.component.css']
})
export class MaterialTableComponent {
  apiArray: any[] = []; // API数组
  dataSource: any[] = []; // 材料表数据源
}

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'your-api-service'; // 替换为实际的API服务

@Component({
  selector: 'app-material-table',
  templateUrl: './material-table.component.html',
  styleUrls: ['./material-table.component.css']
})
export class MaterialTableComponent implements OnInit {
  apiArray: any[] = []; // API数组
  dataSource: any[] = []; // 材料表数据源

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getData().subscribe(data => {
      this.apiArray = data; // 从API获取数据并赋值给API数组
      this.dataSource = this.apiArray; // 将API数组赋值给材料表数据源
    });
  }
}

<mat-table [dataSource]="dataSource">
  <!-- 定义表格列 -->
  <ng-container matColumnDef="column1">
    <mat-header-cell *matHeaderCellDef> Column 1 </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.column1 }} </mat-cell>
  </ng-container>

  <!-- 其他列的定义 -->

  <!-- 渲染表格行 -->
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>