Angular 5+Angular Material数据表加载实现方案咨询

嘿，刚上手Angular 5和Angular Material的话，用官方推荐的DataSource来处理表格数据绝对是正确的方向！我来帮你一步步实现你的需求——从消息里解析出ID数组，再通过后端接口拿到对应的Patient对象，最终展示在Material数据表中。

1. 先定义Patient数据模型 #

首先得明确后端返回的Patient对象结构，先写个接口来约束数据：

export interface Patient {
  id: number;
  name: string;
  age: number;
  // 这里根据你的后端接口返回字段补充其他属性
}

2. 优化服务中的数据获取逻辑 #

你提到用getAllPatients方法，这里分两种情况处理：

• 如果后端支持批量查询（推荐！）：直接传ID数组给后端，一次性拿到所有数据
• 如果后端只能单个查询：用RxJS的forkJoin并行发起多个请求，提升效率

代码示例如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
import { Patient } from './patient.model';

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

  // 单个获取Patient的接口
  private getPatient(id: number): Observable<Patient> {
    return this.http.get<Patient>(`/api/patients/${id}`);
  }

  // 后端支持批量的情况：直接传ID列表
  getPatientsByIds(ids: number[]): Observable<Patient[]> {
    return this.http.get<Patient[]>(`/api/patients?ids=${ids.join(',')}`);
  }

  // 后端不支持批量的情况：用forkJoin并行请求
  getPatientsByIdsParallel(ids: number[]): Observable<Patient[]> {
    const requestList = ids.map(id => this.getPatient(id));
    return forkJoin(requestList);
  }
}

3. 创建自定义DataSource类 #

这是实现表格数据加载的核心，我们继承Angular CDK的DataSource，用BehaviorSubject来管理数据和加载状态：

import { DataSource } from '@angular/cdk/collections';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Patient } from './patient.model';
import { PatientService } from './patient.service';

export class PatientDataSource extends DataSource<Patient> {
  private patients$ = new BehaviorSubject<Patient[]>([]);
  private loading$ = new BehaviorSubject<boolean>(false);

  // 暴露加载状态给组件使用
  public loadingStatus$ = this.loading$.asObservable();

  constructor(private patientService: PatientService) {
    super();
  }

  // 连接表格数据，返回Observable
  connect(): Observable<Patient[]> {
    return this.patients$.asObservable();
  }

  // 断开连接时清理资源
  disconnect(): void {
    this.patients$.complete();
    this.loading$.complete();
  }

  // 核心加载方法：传入ID数组，触发数据获取
  loadPatients(patientIds: number[]) {
    this.loading$.next(true);

    // 优先用批量接口，没有的话替换成getPatientsByIdsParallel
    this.patientService.getPatientsByIds(patientIds)
      .pipe(
        catchError(() => {
          console.error('加载Patient数据失败');
          return of([]);
        })
      )
      .subscribe(patients => {
        this.loading$.next(false);
        this.patients$.next(patients);
      });
  }
}

4. 在组件中整合DataSource #

在你的表格组件里，初始化DataSource，解析消息得到ID数组后调用加载方法：

import { Component, OnInit } from '@angular/core';
import { PatientDataSource } from './patient-data-source';
import { PatientService } from './patient.service';

@Component({
  selector: 'app-patient-table',
  templateUrl: './patient-table.component.html'
})
export class PatientTableComponent implements OnInit {
  dataSource: PatientDataSource;
  // 定义表格要展示的列，和模板对应
  displayedColumns: string[] = ['id', 'name', 'age'];

  constructor(private patientService: PatientService) {}

  ngOnInit() {
    this.dataSource = new PatientDataSource(this.patientService);
    
    // 这里替换成你实际的消息解析逻辑
    const parsedPatientIds = this.parseMessageToGetIds();
    this.dataSource.loadPatients(parsedPatientIds);
  }

  // 解析消息获取ID数组的方法，根据你的消息格式调整
  private parseMessageToGetIds(): number[] {
    // 示例：假设消息是JSON格式
    const message = '{"patientIds": [1, 3, 5, 7]}';
    const parsedData = JSON.parse(message);
    return parsedData.patientIds;
  }
}

5. 编写Material表格模板 #

最后在HTML模板里实现表格，同时加上加载状态提示：

<div class="mat-elevation-z8">
  <mat-table [dataSource]="dataSource">
    <!-- ID列 -->
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> 患者ID </mat-header-cell>
      <mat-cell *matCellDef="let patient"> {{ patient.id }} </mat-cell>
    </ng-container>

    <!-- 姓名列 -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> 患者姓名 </mat-header-cell>
      <mat-cell *matCellDef="let patient"> {{ patient.name }} </mat-cell>
    </ng-container>

    <!-- 年龄列 -->
    <ng-container matColumnDef="age">
      <mat-header-cell *matHeaderCellDef> 年龄 </mat-header-cell>
      <mat-cell *matCellDef="let patient"> {{ patient.age }} </mat-cell>
    </ng-container>

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

  <!-- 加载中提示 -->
  <div *ngIf="dataSource.loadingStatus$ | async" class="loading-container">
    <mat-spinner diameter="40"></mat-spinner>
  </div>
</div>

一些小提醒 #

• 性能优先：如果ID数量较多，一定要尽量说服后端支持批量查询，避免发起几十上百个HTTP请求
• 错误处理：上面的代码加了基础的错误捕获，你可以扩展成弹出MatSnackBar提示用户
• Angular 5兼容性：确保你的RxJS版本是5.5+（Angular 5默认配套的版本），forkJoin在RxJS 5里直接从rxjs导入即可

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