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

【问题标题】：Pipe doesn't update the template when remove a item from array从数组中删除项目时，管道不会更新模板
【发布时间】：2018-12-14 18:01:01
【问题描述】：

由于normalizeUri 管道，我从pages 数组中删除了项目后无法刷新模板。没有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);
    }
  }

管道.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);
    });
  }

}

【问题讨论】：

如果没有必要保持相同的引用，那么您可以尝试this.pages = this.pages.filter(p => this.selectedPage.pageId !== p.pageId)而不是查找索引和拼接。这样您就可以使用纯管道。

标签： javascript angular typescript ionic3

【解决方案1】：

您必须为此使用impure 管道

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

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

但是不纯的管子用起来不可靠。

【讨论】：

完美。对于我的用例，性能不是问题，因为该页面不会存在超过几秒钟。非常感谢:)
@Sampath。很高兴为您提供帮助。！

【解决方案2】：

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

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

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

因为纯管道经常被执行，所以通常不鼓励使用它们。 不纯管道经常被调用，就像每次击键或鼠标移动一样频繁。（Angular 手册）

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

【讨论】：