На этот раз я получаю данные из API, но хочу их отфильтровать. Вот логин. Люди -> Фильтр по статусу (включить или отключить)
У меня есть следующие файлы
- люди.component.ts
- people.component.html
- люди.pipe.ts
JSON-файл
- {"Имя": "Ана", "Статус": "Включено"},
- {"Имя": "Марсело","Статус": "Включено"},
- {"Имя": "Жезл","Статус": "Отключено"}
люди.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);
}
}
люди.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>
По умолчанию фильтруется «Включить», но я не могу перенести переменную на вкладку «Прошлое», чтобы изменить значение фильтра.
