2
我试图效仿AngularJS中的OrderBy。Angular 4 FilterBy Pipe
鉴于这种数组。我需要通过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;
}
}
});
}
}
}
如何我管需要进行重构？
UPDATE 这就是我的管道现在的样子。注意，这辆车是一个数字，在今年显示为一个字符串
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;
}
}
});
}
}
}
这不行吗？ – Amit
与预期不符。我刚刚意识到管道正在评估字符串而不是数字。 car_category应该只包含数字。 –