时间戳

首页 > 解决方案 > 使用 RXJS 将项目添加到可观察数组后如何触发可观察值发射？

angular - 使用 RXJS 将项目添加到可观察数组后如何触发可观察值发射？

问题描述

我的服务中有一个可观察的数组：

gearItems$: Observable<GearItem[]>;

该数组在构造函数中被实例化以进行测试：

constructor() 
  {
    this.gearItems$ = of([
      { ID: 1, name: 'T-shirt', price: 10, sizes: [
        { size: Size.L, available: false , color: 'warn' }, ,
      ], inStock: true, images: [
        { ID: "1", name: "image1", size: 12, type: "type", url: "../../../assets/IMG_5585.JPG" },
        { ID: "123", name: "image2", size: 12, type: "type", url: "../../../assets/IMG_5904.JPG" }
      ]...)
  }

我需要更新/添加该数组中的单个项目并触发新值发射：

updateGearItem(gearItem: GearItem): Observable<GearItem>{
    return this.gearItems$.pipe(
      flatMap((gearItems: GearItem[]) => {
        return gearItems.filter(gI => gI.ID !== gearItem.ID);
      })
    )
  }

  createGearItem(gearItem: GearItem): Observable<any>{
    // create HTTP request to the backend to create a new item
    return this.gearItems$.pipe(
      map(gearItems => {
        gearItems.push(gearItem)        
        return gearItems;
      })
    )       
  }

但是我不能这样做。在我的 ngOnInit 组件中，我有一个订阅监听gearItems$: Observable<GearItem[]>;可观察数组：

ngOnInit() {    
    this.merchandiseService.fetchAllGearItems().subscribe(
      (gearItems: GearItem[]) => this.gearItems = gearItems
    );
  }

但是每当我尝试在可观察数组中添加或更新项目时，什么都没有发生。我在这里想念什么？

标签： angulartypescriptrxjsobservable

解决方案

这是一个简单形式的解决方案。

addItem将获取当前的内容BehaviorSubject并附加一个新项目作为副作用。请注意，第一个first()是确保我们只从 BehaviorSubject 中获取最新值，否则它将继续发出，因为在 .next 后面有一个 .next tap()。最后的 first() 是完成 observable

const items = new BehaviorSubject([])
const addItem =
  (item) => items.pipe(
    first(),
    tap(arr => items.next([...arr, item])),
    first(),
  )
items.subscribe(console.log)
addItem('a').subscribe()
addItem('b').subscribe()
addItem('c').subscribe()

推荐阅读