productId 不同时如何避免覆盖事件？

Question

我有一份产品清单。每个产品都有 id 和 description。

<div *ngFor="let product of products">
  <input type="text" [ngModel]="product.description" (ngModelChange)="onEdit($event, product.id)">
</div>

editStream: EventEmitter<any> = new EventEmitter();

ngOnInit() {
  this.editStream
    .debounceTime(1000)
    .distinctUntilChanged()
    .mergeMap(x => Observable.of(x))
    .subscribe(x => {
      // based on product id, update its description in the database
    });

}

private onEdit(description: string, id: string) {
  this.editStream.emit({ description, id });
}

当我编辑一个产品的描述时效果很好。

但是，如果我编辑product1的描述，然后立即编辑product2的描述（时间间隔小于1s），只有product2的描述会被已更新。

我猜这是因为product2的活动覆盖了product1的活动，我只订阅了一个地方

我该如何解决这个问题？谢谢

Answer 1

如果您想使用 distinctUntilChanged()，则每个 product 需要一个不同的 Observable。

this.products.forEach(p => this.editStreams.push(new EventEmitter())

<div *ngFor="let product of products let i=index">
  <input type="text" [ngModel]="product.description" (ngModelChange)="onEdit($event, i, product.id)">
</div>

private onEdit(description: string, id: string) {
  this.editStreams[i].emit({ description, id });
}

productId 不同时如何避免覆盖事件？

How to avoid overwriting event when productId is different?

rxjs

typescript

rxjs5

angular