如何在第一次加载时从可观察对象填充matTableDataSource

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  dataSource: MatTableDataSource<any>;
  observableData: Observable<any>; // 可观察对象

  constructor() { }

  ngOnInit() {
    this.observableData = this.getObservableData(); // 获取可观察对象的数据
    this.observableData.subscribe(data => {
      this.dataSource = new MatTableDataSource(data); // 将数据填充到matTableDataSource
    });
  }

  getObservableData(): Observable<any> {
    // 返回一个可观察对象，可以是从后端API获取的数据
    // 例如，使用HttpClient从API获取数据：
    // return this.http.get<any>('your-api-url');
  }
}

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

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

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

export class YourComponent implements OnInit {
  displayedColumns: string[] = ['column1', 'column2']; // 列名
  // ...
}