Angular 2 过滤管答案

【问题标题】：Angular 2 Filter PipeAngular 2 过滤管
【发布时间】：2016-10-16 03:00:25
【问题描述】：

尝试编写自定义管道来隐藏一些项目。

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

// Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        return value.filter(item => {
            return item.visible == true;
        });
    }
}

HTML

<flights *ngFor="let item of items | showfilter">
</flights>

组件

import { ShowPipe } from '../pipes/show.pipe';

@Component({
    selector: 'results',
    templateUrl: 'app/templates/results.html',
    pipes: [PaginatePipe, ShowPipe]
})

我的物品有可见的属性，可以是真也可以是假。

但是没有显示，我的管道有问题吗？

我认为我的管道正在工作，因为当我将管道代码更改为：

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

// Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        return value;
    }
}

它将显示所有项目。

谢谢

【问题讨论】：

您是否将pipes: [ShowPipe] 添加到您正在使用管道的组件中？我看不出你的代码有什么问题。
如果你把它变成不纯的管道会发生什么？ @Pipe({ name: 'showfilter', pure : false })
Works as intended
嘿，我刚刚对您的代码进行了快速测试，没有任何问题（除了不遵循推荐的做法：P）。您能否检查您的任何项目是否具有“可见”=== true？
“不遵循推荐的做法”是什么意思？有什么具体的提示吗？

标签： javascript angular angular-pipe

【解决方案1】：

我很确定这是因为 items 的初始值为 []。当您稍后将项目添加到 items 时，管道不会重新执行。

添加pure: false 应该可以解决它：

@Pipe({
    name: 'showfilter',
    pure: false
})
export class ShowPipe {
    transform(value) {
        return value.filter(item => {
            return item.visible == true;
        });
    }
}

pure: false 对性能有很大影响。每次更改检测运行时都会调用这样的管道，这很常见。

使纯管道被调用的一种方法是实际更改输入值。

如果你这样做了

this.items = this.items.slice(); // create a copy of the array

每次修改（添加/删除）items 后，Angular 都会识别更改并重新执行管道。

【讨论】：

【解决方案2】：

不建议使用不纯的管道。我会影响你的表现。
即使源没有改变也会被调用。
因此，正确的替代方法是更改返回对象的引用。


@Pipe({
    name: 'showfilter'
})

export class ShowPipe {
    transform(value) {
        value = value.filter(item => {
            return item.visible == true;
        });
     const anotherObject = Object.assign({}, value) // or else can do cloning.
     return anotherObject 
    }
}

【讨论】：