Angular项目中无法将数据传入mat-table问题求助

你的JSON数据外层是一个包含buildings数组的对象，但服务中直接将HTTP响应解析为Buildings[]类型，实际收到的是{ buildings: Buildings[] }结构的对象，而非数组本身，导致mat-table无法获取正确的数据源。

方案一：在服务中提取数组（推荐） #

使用RxJS的map操作符从响应对象中提取buildings数组，组件无需修改订阅逻辑：

// 服务代码修改
import { map } from 'rxjs/operators';
import { Buildings } from './models/buildings.model';

export class FactionsService {
  castleBuildingsUrl = 'assets/buildings/castleBuildings.json';
  
  constructor(private http: HttpClient) {}

  getCastleBuildings(): Observable<Buildings[]> {
    return this.http.get<{ buildings: Buildings[] }>(this.castleBuildingsUrl)
      .pipe(map(response => response.buildings)); // 提取数组
  }
}

方案二：定义响应接口并在组件中提取数组 #

1. 新增响应结构接口：

// models/buildings.model.ts
export interface Buildings {
  structure: string;
  cost: string;
  requirements: string;
  benefits: string;
}

export interface CastleBuildingsResponse {
  buildings: Buildings[];
}

2. 修改服务返回类型：

// 服务代码
import { CastleBuildingsResponse } from './models/buildings.model';

export class FactionsService {
  castleBuildingsUrl = 'assets/buildings/castleBuildings.json';
  
  constructor(private http: HttpClient) {}

  getCastleBuildings(): Observable<CastleBuildingsResponse> {
    return this.http.get<CastleBuildingsResponse>(this.castleBuildingsUrl);
  }
}

3. 组件中订阅时提取数组：

// 组件TS代码修改
getCastleBuildings() {
  this.factionsService.getCastleBuildings().subscribe((response) => {
    console.log('Received data:', response.buildings);
    this.dataSource = new MatTableDataSource<Buildings>(response.buildings);
  });
}

检查你之前console.log输出的data，会发现它是一个包含buildings属性的对象，而非直接的数组。修正后，mat-table将拿到正确的数组数据源，即可正常渲染表格。

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