Нажмите на вкладку обновить значение фильтра трубы Angular2
На этот раз я получаю данные из 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>
По умолчанию отфильтровывается как "Включить", но я не могу перенести переменную на предыдущую вкладку, чтобы изменить значение фильтра.
1 ответ
Я думаю, что вы ищете нечистые трубы.
@Pipe({
name: 'peopleTab',
pure: false
})
Только нечистые каналы запускаются при изменении элементов массива.