在Angular中,可以使用Array
的sort()
方法对对象数组中的项目进行排序。以下是一个示例代码:
ngOnInit()
生命周期钩子中初始化数组:import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
items: any[];
ngOnInit() {
this.items = [
{ name: 'Item 1', value: 5 },
{ name: 'Item 2', value: 3 },
{ name: 'Item 3', value: 8 },
{ name: 'Item 4', value: 1 },
{ name: 'Item 5', value: 6 }
];
}
}
*ngFor
指令遍历对象数组,并在每个项目上显示名称和值:
-
{{ item.name }} - {{ item.value }}
sort()
方法,并传入一个回调函数来指定排序规则。以下是按值从小到大排序的示例:sortItems() {
this.items.sort((a, b) => {
return a.value - b.value;
});
}
click
事件中调用排序方法:
当点击按钮时,对象数组将按值从小到大的顺序进行排序,并在模板中重新渲染。
注意:如果想实现按其他属性排序,只需要修改回调函数的比较逻辑即可。