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

您可以创建一个管道来处理您的pages数组，并仅以[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>

Answer 2

在这里，我们尝试为每个normalizedURL normalizedURL`添加"page" object. So in the html we need to bind the new arrtubute新属性。

在每次加载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>

发生循环时，请删除模板上的调用方法

2 个答案: