如何在Service中导入JSON文件数据并动态传入Angular Material Table？

一、配置TypeScript允许导入JSON文件 #

若你的Angular版本为12及以上，需修改tsconfig.json的compilerOptions，添加JSON导入支持：

{
  "compilerOptions": {
    // 保留原有配置
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

二、创建数据服务读取JSON数据 #

假设本地JSON文件路径为src/assets/data/table-data.json，创建data.service.ts封装数据获取逻辑：

本地JSON读取 #

import { Injectable } from '@angular/core';
// 直接导入本地JSON文件
import tableData from '../assets/data/table-data.json';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getTableData() {
    return tableData;
  }
}

远程JSON接口读取（若数据来自后端） #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  getTableData(): Observable<any[]> {
    return this.http.get<any[]>('https://your-api-domain/table-data.json');
  }
}

三、组件中绑定数据到Material Table #

在表格组件中替换原ELEMENT_DATA，从服务获取数据并初始化数据源：

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { DataService } from './data.service';

// 定义与JSON结构匹配的数据接口
export interface TableItem {
  id: number;
  name: string;
  // 补充其他字段
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name']; // 对应表格列名
  dataSource!: MatTableDataSource<TableItem>;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // 本地JSON数据处理
    const rawData = this.dataService.getTableData();
    this.dataSource = new MatTableDataSource(rawData as TableItem[]);

    // 远程JSON数据处理（需订阅异步流）
    // this.dataService.getTableData().subscribe(data => {
    //   this.dataSource = new MatTableDataSource(data);
    // });
  }
}

模板文件table.component.html保持标准Material Table结构：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

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

四、替换ELEMENT_DATA无效的常见排查点 #

• 数据结构不匹配：确保JSON字段与自定义接口TableItem的字段名、类型完全一致（注意大小写）。
• 未用MatTableDataSource包装：不能直接将JSON数组赋值给dataSource，必须用MatTableDataSource实例包裹。
• 异步数据未处理：远程JSON需在订阅回调内赋值数据源，同步代码无法获取异步返回的结果。
• 本地JSON路径错误：确认文件放在assets目录下，导入路径拼写正确。
• TypeScript配置缺失：未开启resolveJsonModule会导致JSON导入报错，检查tsconfig.json配置。

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