单击选项卡更新过滤器管道值Angular2

Question

这一次，我从API获取数据，但我想过滤它。这是登录。 人 - ＆gt;按状态过滤（启用或禁用）

我有以下文件

• people.component.ts
• people.component.html
• people.pipe.ts

JSON文件

• {＆＃34;姓名＆＃34;：＆＃34; Ana＆＃34;，＆＃34;状态＆＃34;：＆＃34;启用＆＃34;}，
• {＆＃34;姓名＆＃34;：＆＃34; Marcelo＆＃34;，＆＃34;状态＆＃34;：＆＃34;启用＆＃34;}，
• {＆＃34; Name＆＃34;：＆＃34; Rod＆＃34;，＆＃34; Status＆＃34;：＆＃34; Disable＆＃34;}

people.component.ts

export class peopleComponent implements OnInit {

    /* General Variables */
    titlePage: string = "People";
    errorMessage: string;
    filterPeople: string  = "Enable";

    people: iPeople[]; // Call the service, this is fine 

    constructor(private _peopleService: peopleListService){

    }
    ngOnInit(): void {
    this._peopleService.getInfo()
        .subscribe(
            people => this.people = people,
            error => this.errorMessage = <any>error);
    }
}

people.pipe.ts

@Pipe({
    name: 'peopleTab'
})
export class peopleTabsPipe implements PipeTransform {
    transform(value: iPeopleList[], args: string[]): iPeopleList[] {
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((people: iPeopleList) => people.Status.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }
}

people.component.html

<template ngFor #person [ngForOf]="people | peopleTab:filterPeople">
      <div class="Tabs">
            <ul>
               <li class="active" data-tab="1"><a href="javascript:void(0);">Active</a></li>
               <li data-tab="2"><a href="javascript:void(0);">Past</a></li>
            </ul>
         </div>
      <div class="information">{{person.Name}} {{person.Status}}</div>
</template>

默认情况下，按＆＃34;启用＆＃34;但是我无法将var传输到过去的标签来更改过滤器的值

Answer 1

我认为你正在寻找不纯的管道。

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

当更改数组的元素时，只运行不纯的管道。

请参阅https://angular.io/docs/ts/latest/guide/pipes.html