Angular orderBy 管道用于对数组进行排序。下面是一个示例解决方法,包含了代码示例:
export class MyComponent {
items = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 20 }
];
}
{{ item.name }} - {{ item.age }}
上述代码将按照 name 属性对数组进行排序,并在模板中显示排序后的结果。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
transform(array: any[], field: string): any[] {
array.sort((a: any, b: any) => {
if (a[field] > b[field]) {
return 1;
} else if (a[field] < b[field]) {
return -1;
} else {
return 0;
}
});
return array;
}
}
在上述代码中,我们定义了一个名为 orderBy 的管道,并实现了 transform 方法。该方法接收两个参数,一个是要排序的数组,另一个是排序的字段。使用数组的 sort 方法对数组进行排序,并返回排序后的结果。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my.component';
import { OrderByPipe } from './order-by.pipe';
@NgModule({
declarations: [
MyComponent,
OrderByPipe
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [MyComponent]
})
export class AppModule { }
在上述代码中,我们将 OrderByPipe 管道添加到了 declarations 数组中。
现在,当你运行应用程序时,你应该可以看到按照指定字段排序的数组的结果在模板中显示出来。
希望这个示例解决方法对你有帮助!