首页 > 营销学院 > 技术知识

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

本文旨在解决Angular 2+中，表格组件无法响应共享服务中数组数据变化的问题。通过使用`BehaviorSubject`替换`EventEmitter`，并结合`async`管道，实现表格数据的响应式更新，避免手动管理订阅，简化代码逻辑，提升应用性能。本文提供详细的服务和组件代码示例，以及Angular Material Table和标准Table两种场景下的HTML实现方案。

在Angular应用中，经常需要将从服务获取的数据展示在表格组件中。当服务中的数据发生变化时，如何确保表格组件能够及时更新，是一个常见的问题。传统的EventEmitter虽然可以实现组件间的通信，但在服务中管理数据更新并通知组件时，使用Subject（特别是BehaviorSubject）往往是更合适的选择。

为什么选择 BehaviorSubject？

BehaviorSubject与Subject的主要区别在于，它会保存当前的值，并且在新的订阅者订阅时，立即将当前值推送给订阅者。这对于表格组件来说非常重要，因为组件可能在数据更新之后才初始化，使用BehaviorSubject可以确保组件在初始化时就能获取到最新的数据。

服务改造

首先，我们需要修改服务代码，使用BehaviorSubject来管理数据更新。

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([]);
  private pixData$ = this.pixUpdated.asObservable();
  pixUrl: string = 'https://example.ckp-dev.example.com/example';


  constructor(private http: HttpClient) {}

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

  getData(): Observable {
    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);
  }
}

代码解释：

private pixUpdated = new BehaviorSubject([]);: 创建一个BehaviorSubject实例，初始值为空数组。
private pixData$ = this.pixUpdated.asObservable();: 将BehaviorSubject转换为Observable，以便组件订阅。
fetchData(): 从后端获取数据，并通过pixUpdated.next(response)更新BehaviorSubject的值。
getData(): 返回可观察对象，供组件订阅。
handleError(): 错误处理函数，用于处理HTTP请求中的错误。

组件改造

接下来，我们需要修改组件代码，订阅服务中的Observable，并使用async管道来显示数据。

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;

  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();
  }
}

代码解释：

dataSource$!: Observable;: 声明一个Observable类型的变量，用于存储表格数据。
constructor(private pixService: PixSearchService) {}: 注入PixSearchService。
ngOnInit(): 在组件初始化时，调用fetchData()获取数据，并调用loadData()订阅数据。
fetchData(): 调用服务中的fetchData()方法，触发数据更新。
loadData(): 调用服务中的getData()方法，获取数据流，并赋值给dataSource$。

HTML模板

最后，我们需要修改HTML模板，使用async管道来显示数据。

Angular Material Table:


    
   ID 
     {{element.id}}

ID	{{element.id}}

Standard Table:


  
    
      ID
      
    
  
  
    
      {{item.id}}

ID
{{item.id}}

代码解释：

(dataSource$ | async): 使用async管道订阅dataSource$，自动处理订阅和取消订阅，避免内存泄漏。
*ngFor="let item of (dataSource$ | async)": 遍历数据，显示表格内容。

总结

通过使用BehaviorSubject和async管道，我们可以实现表格组件的响应式数据更新，简化代码逻辑，提高应用性能。这种方法避免了手动管理订阅，减少了出错的可能性。在实际开发中，可以根据具体需求选择合适的Subject类型，例如，如果只需要获取最新的数据，可以使用BehaviorSubject；如果需要获取所有历史数据，可以使用ReplaySubject。

注意事项：