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

Question

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

我有以下文件

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

JSON 文件

• {“名称”：“安娜”，“状态”：“启用”}，
• {“名称”：“马塞洛”，“状态”：“启用”}，
• {"Name": "Rod","Status": "Disable"}

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>

---

默认情况下由“启用”过滤，但我无法将 var 传输到过去的选项卡以更改过滤器的值

Answer 1

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

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

当数组的元素发生变化时，只有不纯的管道才会运行。

见https://angular.io/docs/ts/latest/guide/pipes.html