Angular 4 AsyncPipe无法修改数据：如何向Observable数组添加新值？

首先得明确：Observable本身并不是数组，它是数据流的包装器，所以肯定没有数组的push方法。你需要的是一个可以主动向数据流中推送新值的Observable类型，RxJS里的Subject家族正好能解决这个问题。

为什么不用EventEmitter？ #

你提到服务里用了EventEmitter，虽然它本质上是Subject的子类，但它的设计初衷是用于组件的@Output事件传递，在服务中使用Subject/BehaviorSubject才是更符合RxJS最佳实践的选择，灵活性也更强。

具体实现步骤 #

1. 改造服务：用BehaviorSubject管理数据流

BehaviorSubject会保存当前的最新值，新订阅的组件也能立即拿到这个值，非常适合需要初始状态的场景。如果不需要初始值，用普通的Subject就行。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class YourDataService {
  // 初始化一个空数组作为初始值
  private dataStream = new BehaviorSubject<any[]>([]);
  // 对外暴露只读的Observable，防止外部直接修改数据源
  public data$ = this.dataStream.asObservable();

  // 提供添加新值的方法
  addNewValue(newItem: any) {
    // 获取当前数据流中的数组
    const currentData = this.dataStream.value;
    // 生成新数组（保持不可变性，避免直接修改原数组引发的变更检测问题）
    const updatedData = [...currentData, newItem];
    // 推送新数组到数据流中
    this.dataStream.next(updatedData);
  }
}

2. 发送组件：调用服务的添加方法

在需要发送新值的组件里，注入服务并调用addNewValue方法：

import { Component } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-sender',
  template: `<button (click)="addNewItem()">添加新内容</button>`
})
export class SenderComponent {
  constructor(private dataService: YourDataService) {}

  addNewItem() {
    // 这里可以换成你需要添加的实际数据
    const newItem = { id: Date.now(), text: '来自其他部分的新值' };
    this.dataService.addNewValue(newItem);
  }
}

3. 接收组件：订阅数据流并在模板中展示

在需要展示数据的组件里，通过async管道订阅数据流（async管道会自动帮你处理订阅和取消订阅，避免内存泄漏）：

import { Component } from '@angular/core';
import { YourDataService } from './your-data.service';

@Component({
  selector: 'app-receiver',
  template: `
    <div>
      <h3>数据列表</h3>
      <ul>
        <li *ngFor="let item of data$ | async">{{ item.text }}</li>
      </ul>
    </div>
  `
})
export class ReceiverComponent {
  // 直接使用服务暴露的Observable
  data$ = this.dataService.data$;

  constructor(private dataService: YourDataService) {}
}

关键要点 #

• 用next()方法替代push：这是向Observable数据流推送新值的标准方式。
• 保持数据不可变性：每次添加新值时生成新数组，而不是直接修改原数组，这能确保Angular的变更检测正确触发。
• 用async管道管理订阅：无需手动调用subscribe和unsubscribe，简化代码同时避免内存泄漏。

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