当存在循环时，删除模板上的调用方法

Question

我知道在模板上调用方法不好，因为它在每次检测到更改时都会触发。但我如何才能在下面的代码中删除它？这里的问题是它应该在循环下工作。否则，我可以这么做。这里有线索吗？

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

提供商.ts

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

Answer 1

您可以创建一个管道来处理pages数组，并只返回您想要作为[src]的"规范化"url

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>

Answer 2

在这里，我们试图将normalizedURL添加到每个"page" object. So in the html we need to bind the new arrtubute规范化的URL中一个新属性`。

在该过程中，每次加载CCD_ 6之后都需要调用CCD_ 5。

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>