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

您必须为此使用impure管道

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

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

但是不纯净的管道使用不可靠。

Answer 2

您已经创建了所谓的“纯管道”。如果未指定类型，则为默认值。仅当“检测到输入值发生纯更改时，才执行纯管道。纯更改是对原始输入值（字符串，数字，布尔值，符号）的更改或对象引用的更改” （日期，数组，函数，对象）。” （Angular Manual）

要使管道不纯，请将false标志添加到管道装饰器中：

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

由于Pure管道经常执行，因此通常不建议使用。 经常调用不纯管道，就像每次击键或鼠标移动一样。（Angular Manual）

相反，在将URI分配给将在模板中呈现的对象之前，请考虑对其进行规范化。

从数组中删除项目时，管道不会更新模板

2 个答案: