Pipe не обновляет шаблон при удалении элемента из массива

Question

Мне не удалось обновить шаблон после удаления элемента из массива pages из-за трубы normalizeUri.Тот же код работает нормально без normalizeUri трубы.Можете ли вы сказать мне, в чем заключалась проблема реализации канала?т.е. почему шаблон не обновляется, если есть канал.

.html

  <ion-slides pager (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor='let page of pages | normalizeUri'>
      <img [src]='page' />
    </ion-slide>
  </ion-slides>

.ts

  async removePage() {
    try {

      await SbSdk.removePage({ page: this.selectedPage });
      let pageIndexToRemove = null;
      this.pages.forEach((p, index) => {
        if (this.selectedPage.pageId === p.pageId) {
          pageIndexToRemove = index;
        }
      });

      this.pages.splice(pageIndexToRemove, 1);
      this.selectedPage = null;

      if (this.pages.length == 0) {//no pages
        this.goToScan();
        return;
      } else {
        setTimeout(() => {
          this.goToSlide(this.pages.length - 1);
        }, 500);
      }
      this.changeDetector.detectChanges();
    }
    catch (err) {
      console.log(err);
    }
  }

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { ImageHandlingProvider } from '../../providers/image-handling/image-handling';
import { Page } from 'cordova-plugin-scanbot-sdk';

@Pipe({
  name: 'normalizeUri',
})
export class NormalizeUriPipe implements PipeTransform {

  constructor(private imageHandlingProvider: ImageHandlingProvider) { }
  transform(pages: Page[]): string[] {
    return pages.map((p) => {
      return this.imageHandlingProvider.normalizeImageFileUri(p.documentPreviewImageFileUri || p.originalPreviewImageFileUri);
    });
  }

}

Answer 1

Вы создали то, что считается Чистой трубой.Когда тип не указан, это значение по умолчанию.Чистые каналы выполняются только "когда он обнаруживает чистое изменение для входного значения. Чистое изменение - это либо изменение примитивного входного значения (String, Number, Boolean, Symbol), либо изменение ссылки на объект (Дата, Массив, Функция, Объект). "( Angular Manual )

Чтобы превратить вашу трубу в нечистую, добавьте ложный флаг в декоратор трубы:

@Pipe({
  name: 'normalizeUri',
  pure: false
})

Поскольку чистые трубы выполняются много, онив общем обескуражен. Нечистый канал вызывается часто, так же часто, как каждое нажатие клавиши или движение мыши. (Angular Manual)

Вместо этого рассмотрите возможность нормализации ваших URI перед назначением их объекту, который будет отображаться вшаблон.

Answer 2

Для этого необходимо использовать impure трубу

@Pipe({
  name: 'normalizeUri',
  pure: false
})

https://blog.angularindepth.com/the-essential-difference-between-pure-and-impure-pipes-and-why-that-matters-999818aa068

Но нечистая труба не надежна в использовании.