Angular – 主题数组中的 edit/remove 元素

Angular – edit/remove element in a Subject Array

我有一个用户数组的主题

  private _currentHeroes = new Subject<Hero[]>();
  currentHeroes = this._currentHeroes.asObservable();

在我的服务中给用户加电的功能

powerUp(id: number) {
return this.http
  .post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
  .pipe(
    tap((updatedHero: Hero) => {
      this._currentHeroes.next(
        // I would like to edit the specific element in the array and than sort them by the power.
      );
    })
  );
  }

我的服务删除用户的功能

  delete(id: number) {
return this.http.delete<Hero>(environment.apiUrl + 'heroes/' + id).pipe(
  tap((deletedHero) => {
    this._currentHeroes.next(
      // Here I delete the specific element from the array
    );
  })
);
  }

如果主题是 BehaviorSubject 那么我会这样做:

    powerUp(id: number) {
    return this.http
      .post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
      .pipe(
        tap((updatedHero: Hero) => {
          this._currentHeroes.next(
            this._currentHeroes.value
              .map((hero: Hero) =>
                hero.id === updatedHero.id ? updatedHero : hero
              )
              .sort((a, b) => a.currentPower - b.currentPower)
          );
        })
      );
  }

  delete(id: number) {
    return this.http.delete<Hero>(environment.apiUrl + 'heroes/' + id).pipe(
      tap((deletedHero) => {
        this._currentHeroes.next(
          this._currentHeroes.value.filter(
            (hero: Hero) => hero.id !== deletedHero.id
          )
        );
      })
    );
  }

但我的目标是在使用 Subject 而不是 BehaviorSubject 时实现相同的目标。

我尝试获取主题的值,但这是不可能的,因为它是一个主题。我尝试在线搜索,但不幸的是,我没有找到任何有用的解决方案来满足我的需求。

有人遇到过这个问题吗?或者如何解决?

我假设你正在做一个服务,那么你可以在服务属性中引用你需要修改的数组。

heroes = [];

然后,在每次操作之后,您可以修改该值,然后使用 Subject 或 Behavior Subject 或您想要使用的任何内容发出。

powerUp(id: number) {
return this.http
  .post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
  .pipe(
    tap((updatedHero: Hero) => {
        //modify data reference, to add, update or delete value
        // in this case modify with powerup
        this.heroes = this.heroes
              .map((hero: Hero) =>
                hero.id === updatedHero.id ? updatedHero : hero
              )
              .sort((a, b) => a.currentPower - b.currentPower)
      // emit the resuelt after every operation 
      this._currentHeroes.next(
        this.herores
      );
    })
  );
  }

请记住,您必须订阅 return 您在代码中显示的可观察对象的每个操作。

// for example to hero with id 2
this.yourHeroService.powerUp(2).subscribe()