web-dev-qa-db-ja.com

Angular 6 + RxJS 6.0：Observableに含まれる配列に新しい要素をプッシュする方法

Firebaseサーバーからデータをまとめて受信していますが、そのデータをレンダリングするには、observableに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を使用してイベントをレンダリングしています。

おかげで、

angularrxjsobservablesubject
8
Alok G.

ここでの主題は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 。

それが役に立てば幸い！

13
GeoAstronaute

GeoAstronauteの答えに加えて、配列からデータを削除する方法は次のとおりです。

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

I.E：HTMLのngforloopにはlet i = indexは、削除するデータのインデックスを提供します。第二に、remove関数はngforloopタグ内にある必要があります:-)

1
blixenkrone