0

我正在尝试为元素数组创建一个角度为 2 的管道,以便它根据所选的 false 过滤唯一的元素,

我的阵列

this.states =  [ {name: 'John', selected: false, value: 1}, {name: 'Bill', selected: false, value: 2},
    {name: 'Smith', selected: false, value: 3}, {name: 'Alex', selected: false, value: 4},
    {name: 'Martin', selected: false, value: 5}, {name: 'James', selectes: false, value: 6}];

我需要过滤选择为假的值,

我的管道代码

import {Injectable,Pipe} from 'angular2/core';

@Pipe ({
name : 'restrictValues'
})
@Injectable()
export class restrictValues implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[1]) !== true);
    }
}

我的 HTML 实现

  <select ngControl="select_state" (change)="statechange()" #select_state="ngForm" class="form-control btn btn-primary">
    <option *ngFor="#statez of states | restrictValues : false" value="{{statez.value}}">
        {{statez.name}}
    </option>
  </select>

如果代码中有任何问题,管道无法按预期工作,请纠正我

4

3 回答 3

2
@Pipe({
    name:'restrictValues'
})
@Injectable()
export class restrictValues implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.selected === false);
    }
}

请注意,您的代码示例实际上并未查看selected对象的属性 - 它正在选择id.

于 2016-07-04T06:05:25.383 回答
1

您可能需要使管道不纯

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

否则在states.

这会导致在每个更改检测周期执行管道。你可以考虑使用一个主动通知变化的 observable。

同样在较新的 Angular2 版本(自~RC.1 起)中,可选参数不再作为数组传递

transform(items: any[], args: any[]): any {

应该

transform(items: any[], param1?:any, param2?:any): any {

取决于你想支持多少参数

于 2016-07-04T06:07:25.183 回答
0
import {Injectable,Pipe} from 'angular2/core';

@Pipe ({
name : 'restrictValues'
})
@Injectable()
export class restrictValues implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => !item.selected);
    }
}
于 2016-07-04T06:11:49.307 回答