Angular - 编辑作为数组类型的主题

Question

我正在编写一个管理员可以升级用户权限的应用程序。

在我向服务器发送请求以增加用户的权力之后。我从服务器返回用户列表：

powerUp(id: number) {
return this.http
  .post<Hero[]>(environment.apiUrl + 'heroes/powerUp/' + id, {})
  .pipe(
    map((heroes) => {
      this.currentHeroes.next(hero);
    })
  );

}

这里是主题：

private currentHeroes = new BehaviorSubject<Hero[]>(null);
currentHeroes$ = this.currentHeroes.asObservable();

问题是它不是官方的，因为我只能从服务器返回正在启动的特定用户。

powerUp(id: number) {
    return this.http
      .post<Hero[]>(environment.apiUrl + 'heroes/powerUp/' + id, {})
      .pipe(
        map((hero) => {
          // update the particular hero in the currentHeroes subject
        })
      );
  }

我的问题是如何在没有.next() 的情况下修改 currentHeroes 主题（仅限更新的用户）而不从服务器返回整个列表。

我已尝试关注：

  powerUp(id: number) {
    return this.http
      .post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
      .pipe(
        map((updatedHero) => {
          this.currentHeroes$.pipe(
                // doesn't enter here
                map((oldHeroes) => {
                  const index = oldHeroes.findIndex((hero) => hero.id === id);
                  oldHeroes[index] = updatedHero;
                })
              );
            })
          );
      }

英雄卡模板

export class HeroCardComponent implements OnInit {
  @Input() hero: Hero;

  constructor(public heroService: HeroService, private toastr: ToastrService) {}

  ngOnInit(): void {}

  powerUp(id: number, name: string) {
    this.heroService.powerUp(id).subscribe(() => {
      this.toastr.success(`${name} was successfully powered up!`);
    });
  }

  delete(id: number, name: string) {
    this.heroService.delete(id).subscribe(() => {
      this.toastr.success(`${name} was successfully deleted`);
    });
  }
}

谁能解释一下我该怎么做？

Answer 1

您可以替换之前的 currentHeroes$，如果您使用的是 async 管道，它应该可以直接使用。

如果您的模板如下所示：

<div *ngFor="let hero of (currentHeroes$ | async)">
  <app-hero-card [hero]="hero"></app-hero-card>
</div>

您的组件可能如下所示：

@Component({…})
export class HeroListComponent {

  currentHeroes$: Observable<Hero[]>
  constructor(private heroService: HeroService) {
    this.currentHeroes$ = this.heroService.getHeroes()
  }

  powerUp(heroId: string) {
    this.currentHeroes$ = this.heroService.powerUp(heroId).pipe(
      switchMap(updatedHero => {
          return this.currentHeroes$.pipe(
            map(oldHeroes => {
               const index = oldHeroes.findIndex(hero => hero.id === updatedHero.id)
               oldHeroes[index]=updatedHero
               return oldHeroes
            })
          );
      })
     );
  }
}

现在对魔法进行一些解释：

1. HeroService.powerUp(heroId) 将返回一个 observable，一旦网络请求完成，它将发出更新后的英雄
2. 然后我们通过应用来自 RxJS 的 switchMap 管道来转换该 observable。 switchMap 所做的是它允许说；好的，这里发生的任何事情都将由另一个 observable（我们返回的那个）处理
3. 在返回的 Observable 上，我们只是获取旧的 currentHeroes$ observable 并通过查找它的 id 并更新数组项来替换旧的 hero。最后返回更新后的数组

额外提示

如果后端返回更新后的列表或者您可以触发重新获取，代码会少很多

如果后端返回完整列表

powerUp(heroId:string) {
  this.currentHeroes$ = this.heroService.powerUp(heroId)
}

如果您想触发重新提取

powerUp(heroId:string) {
  this.currentHeroes$ = this.heroService.powerUp(heroId).pipe(
    switchMap(_updatedHero => this.heroService.getHeroes())
  );

}