我正在尝试模仿 AngularJS 中的 OrderBy。
鉴于这种数组。我需要按 car_category 过滤汽车。
[
{
"car_category": 3,
"name": "Fusion",
"year": "2010"
},
{
"car_category": 2,
"name": "Mustang",
"year": "2010"
},
{
"car_category": 3,
"name": "Fiesta",
"year": "2010"
},
]
这是我的代码到目前为止的样子
car.component.html
<div *ngIf="products">
<ul *ngFor="let product of products | filterBy: car_category">
<li>{{car.name}}</li>
</ul>
</div>
car.component.ts
import { Component, OnInit } from '@angular/core';
import { CarService } from '../car.service';
import { ICars } from '../ICars';
import { FilterByPipe } from '../filter-by.pipe';
@Component({
selector: 'app-home-page',
templateUrl: './car.component.html',
styleUrls: ['./car.component.css']
})
export class CarComponent implements OnInit {
cars: Array<ICars>;
errorMessage: string;
filteredCars: any;
car_category= 3;
constructor(private _carService: CarService) { }
ngOnInit() {
this._carService.getCars()
.subscribe(
cars => this.cars = cars,
error => this.errorMessage = error
);
}
}
filet-by.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
transform(value, args) {
if (!args[0]) {
return value;
} else if (value) {
return value.filter(item => {
// tslint:disable-next-line:prefer-const
for (let key in item) {
if ((typeof item[key] === 'string' || item[key] instanceof String) &&
(item[key].indexOf(args[0]) !== -1)) {
return true;
}
}
});
}
}
}
我的管道需要如何重构？
更新 这就是我的管道现在的样子。请注意，汽车是数字，年份显示为字符串
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
transform(value, args) {
if (!args[0]) {
return value;
} else if (value) {
return value.filter(item => {
// tslint:disable-next-line:prefer-const
for (let key in item) {
if ((typeof item[key] === 'number' || item[key] instanceof Number) &&
(item[key].indexOf(args[0]) !== -1)) {
return true;
}
}
});
}
}
}