当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 });
}