如何在首次加载时用Observable填充matTableDataSource

看起来你遇到的核心问题是异步数据加载的时机和MatTable的变更检测机制不匹配，我来帮你拆解原因并给出具体的修复方案：

问题根源 #

你的getAllBooksFromDatabase方法试图同步返回数据，但里面的HTTP请求是异步的——当方法执行return this.returnValue时，HTTP请求还没完成，returnValue还是空数组，所以MatTable初始化时拿到的是空数据。之后请求完成填充数组，但MatTable没有收到数据更新的通知，直到你触发排序/筛选（这些操作会强制MatTable重新检查数据源）。

而硬编码数据能正常显示，是因为数据是同步赋值的，MatTable初始化时就有可用数据。

修复方案 #

方案1：直接在订阅回调中更新数据源（最直观） #

首先调整组件中的数据源管理，然后修改数据获取逻辑：

1. 组件中定义MatTable数据源：

import { MatTableDataSource } from '@angular/material/table';
// ...
dataSource = new MatTableDataSource<BooksData>();

2. 重构数据获取方法，移除同步返回逻辑，直接在订阅中更新数据源：

getAllBooksFromDatabase(): void {
  this.data.getBooks().subscribe((rawData: any[]) => {
    // 过滤并转换数据（注意fine是字符串，要转成数字判断）
    const filteredBooks = rawData
      .filter(item => Number(item.fine) !== 0)
      .map(item => ({
        uid: item.uid,
        bid: item.bid,
        bookTitle: item.bookTitle,
        authorLastName: item.authorLastName,
        authorFirstName: item.authorFirstName,
        issuedDate: item.issuedDate,
        period: item.period,
        fine: item.fine,
        warning: item.warning
      }));
    
    // 直接更新数据源的data属性，MatTable会自动检测到变化并渲染
    this.dataSource.data = filteredBooks;
  });
}

3. 在组件初始化时调用这个方法：

ngOnInit(): void {
  this.getAllBooksFromDatabase();
  // 如果你的表格有排序/筛选功能，记得绑定对应的实例
  // this.dataSource.sort = this.sort;
  // this.dataSource.filterPredicate = ...;
}

方案2：使用Async管道（更优雅，推荐） #

这种方式不需要手动管理订阅，Angular会自动处理数据流和变更检测：

1. 组件中定义一个Observable类型的变量：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
// ...
books$: Observable<BooksData[]>;

2. 在初始化时构建数据流：

ngOnInit(): void {
  this.books$ = this.data.getBooks().pipe(
    map(rawData => rawData
      .filter(item => Number(item.fine) !== 0)
      .map(item => ({
        uid: item.uid,
        bid: item.bid,
        bookTitle: item.bookTitle,
        authorLastName: item.authorLastName,
        authorFirstName: item.authorFirstName,
        issuedDate: item.issuedDate,
        period: item.period,
        fine: item.fine,
        warning: item.warning
      })))
  );
}

3. 模板中使用async管道绑定数据源：

<table mat-table [dataSource]="books$ | async" ...>
  <!-- 你的列定义 -->
</table>

关键注意点 #

• 注意返回数据中fine是字符串类型（比如"0"），所以判断时要转成数字，避免类型匹配问题。
• 不要试图从异步操作中同步返回数据，这是JavaScript异步模型的常见误区。
• 如果使用方案1，确保更新的是dataSource.data而不是直接修改原数组（重新赋值新数组会触发MatTable的变更检测）。

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