Удалить вызывающий метод в шаблоне, когда есть цикл

Question

Я знаю, что вызов метода в шаблоне не годится, так как он срабатывает каждый раз при обнаружении изменений.Но как я могу удалить это из приведенного ниже кода?Проблема здесь в том, что он должен работать по циклу.В противном случае я могу это сделать.Любая подсказка здесь?

  <ion-slides>
    <ion-slide *ngFor='let page of pages'>
      <img [src]='imageHandlingProvider.normalizeImageFileUri(page.documentPreviewImageFileUri)' />
    </ion-slide>
  </ion-slides>

provider.ts

 normalizeImageFileUri(imageFileUri: string): string {
    console.log('imageFileUri', imageFileUri);
    return normalizeURL(imageFileUri);
  }

Answer 1

Здесь мы пытаемся добавить normalizedURL новый атрибут к каждому "page" object. So in the html we need to bind the new arrtubute normalizedURL`.

В процессе processPages() необходимо вызывать после каждой загрузки "pages".

processPages() {
    this.pages.forEach((page) => {
        page.normalizedURL = imageHandlingProvider.normalizeImageFileUri(page.documentPreviewImageFileUri)
    })
}

И соответствующий HTML-код.

<ion-slides>
    <ion-slide *ngFor='let page of pages'>
        <img [src]='page?.normalizedURL' />
    </ion-slide>
</ion-slides>

Answer 2

Вы можете создать канал, который обрабатывает ваш массив pages и возвращает только "нормализованный" URL, который вы хотите использовать как [src]

 import { Pipe, PipeTransform } from '@angular/core';

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

      constructor(private _imageHandlingProvider: ImageHandlingProvider) {}

      transform(pages: any): string[] {
        return pages.map((eachPage) => {
          return this._imageHandlingProvider.normalizeURL(eachPage.documentPreviewImageFileUri);
        })

      }

    }

Используйте этот канал в своем шаблоне как:

<ion-slide *ngFor='let uri of pages | normalizeUri'>
  <img [src]="uri" />
</ion-slide>