Angular 6 + RxJS 6.0：如何将新元素推送到 Observable 包含的数组中答案

【问题标题】：Angular 6 + RxJS 6.0 : How to push new element to array contained by ObservableAngular 6 + RxJS 6.0：如何将新元素推送到 Observable 包含的数组中
【发布时间】：2018-06-14 11:36:01
【问题描述】：

我从 firebase 服务器分块接收数据，同时渲染该数据需要一个坚持 observable contains Array 的库。我不知何故无法将新数据块推送到 observable 包含的现有数据块数组中，

从数据服务中，我通过主题的下一个调用并尝试添加新的 calEvent

 this.homeWorkerService.eventSubject.next(calEvent);

在组件中，我有以下代码

events$: Observable<Array<CalendarEvent<any>>>;

和ngOnInit，我正在向它提供数据

this.events$ = this.service.eventSubject.asObservable();

您能否建议我可以向已保存我的事件的 observable 添加一个新事件的任何方法。

PS：我正在使用this lib 来呈现日历并使用remoteDB 来呈现事件。

谢谢，

【问题讨论】：

标签： angular rxjs observable subject

【解决方案1】：

您的主题是一个 CalendarEvent 数组，您必须在 next() 方法中传递一个 CalendarEvent 数组。我建议在您的情况下使用 BehaviorSubject。这是一个简短的例子：

import { Component } from '@angular/core';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { take } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  obsArray: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
  array$: Observable<any> =  this.obsArray.asObservable();

  constructor() {
  }

  ngOnInit() {
    this.addElementToObservableArray('It works');
  }

  addElementToObservableArray(item) {
    this.array$.pipe(take(1)).subscribe(val => {
      console.log(val)
      const newArr = [...val, item];
      this.obsArray.next(newArr);
    })
  }
}

您可以在此处查看实时示例：Stackblitz。

希望对你有帮助！

【讨论】：

【解决方案2】：

除了 GeoAstronaute 的回答之外，以下是我从数组中删除内容的方法：

  removeElementToObservableArray(idx) {
    this.array$.pipe(take(1)).subscribe(val => {
      const arr = this.subject.getValue()
      arr.splice(idx, 1)
      this.subject.next(arr)
    })
  }

IE：您在 HTML 中的 ngforloop 可以有 let i = index，它会为您要删除的数据提供索引。其次，删除功能必须在 ngforloop 标签内:-)

【讨论】：