Angular 2 表格组件数据更新问题解决方案

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, take, map, catchError, throwError } from 'rxjs';

export interface IPix {
  // Define your IPix interface here
  id: string;
  // ... other properties
}

@Injectable({
  providedIn: 'root',
})
export class PixSearchService {
  private pixUpdated = new BehaviorSubject<IPix[]>([]);
  private pixData$ = this.pixUpdated.asObservable();
  pixUrl: string = 'https://example.ckp-dev.example.com/example';


  constructor(private http: HttpClient) {}

  fetchData(): void {
    this.http.get<any>(this.pixUrl).pipe(
      take(1),
      map((data: any) => data.results),
      catchError(this.handleError)
    )
    .subscribe(response => this.pixUpdated.next(response));
  }

  getData(): Observable<IPix[]> {
    return this.pixData$;
  }

  handleError(err: any) {
    let errorMessage = '';
    if (err.error instanceof ErrorEvent) {
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code:: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return throwError(() => errorMessage);
  }
}

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PixSearchService, IPix } from '../pix-search.service';

@Component({
  selector: 'pix-table-component',
  templateUrl: 'pix-table.component.html',
  styleUrls: ['pix-table.component.css'],
})
export class PixTableComponent implements OnInit {
  dataSource$!: Observable<IPix[]>;

  constructor(private pixService: PixSearchService) {}

  ngOnInit(): void {
    this.fetchData();
    this.loadData(); // you can call this function whenever you need from another function
                     // without fetching again data from the backend
  }

  private fetchData(): void {
    this.pixService.fetchData();
  }

  private loadData(): void {
    this.dataSource$ = this.pixService.getData();
  }
}

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

  <!-- Define other columns here -->

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

<table>
  <thead>
    <tr>
      <th>ID</th>
      <!-- Define other headers here -->
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of (dataSource$ | async)">
      <td>{{item.id}}</td>
      <!-- Define other cells here -->
    </tr>
  </tbody>
</table>