angular - 在 Angular 中使用管道过滤多个属性
问题描述
我已经使用教程使用结果表中的单个属性(名称)过滤搜索,以及我希望它出色地工作的方式,但是我如何调整管道以搜索多个属性(即 SpeciesName、EnclosureName ETC。) ?
管道:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any {
if(!items) return [];
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
return it.Name.toLowerCase().includes(searchText);
});
}
}
HTML:
<section>
<div class="toolbar">
<input id="fur-filter" [(ngModel)]="searchText" class="filter" placeholder="FILTER ANIMALS, SPECIES, ENCLOSURES, TEMPERAMENTS ETC." />
<button id="AddNewAnimal" class="ko-btn">Add New Animal</button>
<button id="InspectionReport" class="ko-btn">Start Inspection Report</button>
</div>
<div class="list-container">
<div class="animal-row" *ngFor="let furries of animalsFur | filter : searchText">
<img [src]="furries.avatar" />
<div class="animal-info">
<p>{{furries.Name}} {{furries.Nickname}}</p>
<div class="row">
<div id="species" class="col">
<p id="species-text">Species: <span>{{furries.SpeciesName}}</span></p>
</div>
<div class="col">
<p>Sub-Species: <span>{{furries.SubSpeciesName}}</span></p>
</div>
<div class="col">
<p>Arrived: <span>{{furries.Welcomed}}</span></p>
</div>
<div class="col">
<p>Age: <span>{{furries.Age}} Years</span></p>
</div>
<div class="col">
<p>Enclosure: <span>{{furries.EnclosureName}}</span></p>
</div>
<div class="col">
<p>Temperament: <span>{{furries.Temperament}}</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
解决方案
将return语句替换为:
return it.Name.toLowerCase().includes(searchText)||
it.Nickname.toLowerCase().includes(searchText)||
it.SpeciesName.toLowerCase().includes(searchText)||
.
.
.
.
;
推荐阅读
- particles - Nvidia Flex 软体约束类型
- javascript - 如何使用另一个数组中其他对象的键替换我的对象数组中的值
- python-3.x - import module error python3 xubuntu 19.04
- django - celery 4.3.0 : get variable from inside current task
- spring-data-jpa - 如何在spring-data-jpa中找到指定的字段
- module - error[E0277]: the trait bound `my_struct::MyStruct: my_trait::MyTrait` is not satisfied
- angular - 将对象属性绑定到输入并将值传递给以角度单击按钮时的功能
- php - 为嵌套数组检查 in_array
- javascript - 如何在 Vue.js 中将特定颜色传递给父组件?
- php - DOCUMENT_ROOT 的使用