В операторе сканирования Rxjs возможно ли удалить элемент из внутреннего аккумулятора, созданного оператором сканирования?

Question

Исходя из этого вопроса здесь , я использую оператор сканирования Rxjs, чтобы отслеживать все наблюдаемые, которые испускаются в массиве аккумулятора, а затем каждое новое входящее значение, к которому я добавляю егоэтот внутренний массив аккумуляторов, созданный оператором сканирования, а затем я излучаю один массив.Это позволяет мне привязывать этот массив к наблюдаемому асинхронному каналу в шаблоне и отображать предварительный просмотр загруженных пользователем изображений.Однако, если я хочу реализовать функцию удаления или отмены, мне нужен доступ к этому массиву, чтобы иметь возможность удалить из него элемент.

Это мой оператор сканирования:

uploadPicture: Subject<UploadPicture> = new Subject<UploadPicture>();
  previewPictures$ = this.uploadPicture.pipe(
    scan(
      (pictures, newPicture) => [...pictures, newPicture],
      new Array<UploadPicture>()
    )
  );

Теперь, когда пользователь нажимает кнопку «Отменить» или «Удалить» на изображении, я хочу извлечь это значение из массива и обновить представление.Есть идеи, как этого достичь?

`

Answer 1

Создайте значение один раз, чтобы добавить его, и еще раз, чтобы удалить его. Если вы выпустите в третий раз, он будет добавлен обратно.

const uploadPicture = new Subject<UploadPicture>();

this.previewPictures$ = uploadPicture.pipe(
    scan<<UploadPicture, UploadPicture[]>(
      (pictures, newPicture) => pictures.includes(newPicture) ? pictures.filter(p=>p !== newPicture) : [...pictures, newPicture],
      []
    )
);

const pic = new UploadPicture();
this.uploadPicture.next(pic); // this will add the picture
this.uploadPicture.next(pic); // this will remove the picture

Это легко сделать в шаблоне.

<div *ngFor="let pic of previewPictures$ | async">
    <button (click)="uploadPicture.next(pic)">Remove</button>
</div>