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의 설명을 편집하면 (시간 간격이 1 초 미만) 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 }); 
} 

는