angular - タブをクリックしてフィルターパイプの値を更新しますAngular2

Question

今回はAPIからデータを取得していますが、フィルタリングしたいと思います。ログインはこちら。ユーザー -> ステータスによるフィルター (有効または無効)

次のファイルがあります

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

JSON ファイル

• {"名前": "アナ","ステータス": "有効"},
• {"名前": "マルセロ","ステータス": "有効"},
• {"名前": "ロッド","ステータス": "無効"}

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>

---

デフォルトでは「有効」でフィルタリングされていますが、変数を過去のタブに転送してフィルターの値を変更することはできません