rxjs地图创建重复

时间:2018-11-09 16:33:53

标签: angular rxjs

在此映射中,我试图更新索引上的数组。这似乎正在创建重复项。有想法吗?

const updateAirport$ = this.updateAirportSubject$
    .pipe(
        filter(airport => !!airport),
        switchMap(airport => this.airportService.updateAirport(airport)),
        tap(airport => {
            this.snackBar.open(`${airport.name} updated`, null, snackBarConfig);
            this.saveStatus = 2;
        }),
        map(airport => {
            const index = this.airports.findIndex(item => item.id === airport.id);
            this.airports = [...this.airports, this.airports[index] = airport];
            return this.airports;
        }),
        tap(() => this.saveStatus = 0),
        shareReplay()
    );

然后:

this.airports$ = airports$.pipe(
    merge(newAirport$, updateAirport$, uploadCSV$)
);

1 个答案:

答案 0 :(得分:1)

这是一个很难诊断的问题,因为我没有完整的解决方案,下面的分析将基于我的一些假设,如果有误,请纠正我。

您的地图逻辑正在此处创建单个索引的不变副本。

this.airports = [...this.airports, this.airports[index] = airport];

然后将其输出合并到此处。

merge(newAirport$, updateAirport$, uploadCSV$)

如果this.updateAirportSubject$中的逻辑基于newAirport$的副本,则您将不可变的副本放回自身...如果是这种情况,请从{{1}中删除原始索引},然后合并或修改原始文件而不创建不可变副本。

修订

仔细研究一下,我相信这种逻辑是您遇到问题的原因,我不确定您在此方面要完成的工作。

  • 您正在创建newAirport$的不可变副本,并附加一个 最后是索引的副本。

    this.airports

您已经使用this.airports = [...this.airports, this.airports[index] = airport];

在此处获得了索引
airport.id

然后使用索引在airport上进行布尔匹配,以确保索引与发出的值匹配,然后追加到 const index = this.airports.findIndex(item => item.id === airport.id); 的末尾。

this.airports

示例

以下逻辑

this.airports[index] = airport

产生此输出。

array = [1,2,3,4,5,6,7,8,9]
  index;

  ngOnInit(){
    this.index = this.array.indexOf(4);
    this.array = [...this.array, this.array[this.index] = 4];
    console.log(this.array);
  }