我有一个对象数组，在这个对象中，我有一些属性，当我单击标题时，我正在对这些属性进行排序以显示在表格上。
由于我有多个带字符串的列、多个带数字的列和多个带日期的列，我想知道是否有一种方法可以在具有数据类型的列上重用相同的 .sort 代码。
类似这样的：
<table>
<tr>
<th (click)="funcSort('string', 'name')">Name</th>
<th (click)="funcSort('string', 'food')">Favorite Food</th>
<th (click)="funcSort('number', 'age')">Age</th>
<th (click)="funcSort('date', 'birth')">Birth</th>
<th (click)="funcSort('number', 'carbs')">Carbs</th>
<th (click)="funcSort('date', 'training')">Training day</th>
</tr>
<tr *ngFor="let item of list">
<td>{{item.name}}</td>
<td>{{item.food}}</td>
<td>{{item.age}}</td>
<td>{{item.birth}}</td>
<td>{{item.carbs}}</td>
<td>{{item.training}}</td>
</tr>
</table>
打字稿：
infos: any = {
name: 'stack',
example: 'example..',
details: [
{nome: "ingrid", idade: 12, destino: "manaus"},
{nome: "ester", idade: 22, destino: "coreia"},
{nome: "sara", idade: 52, destino: "los angeles"},
{nome: "laura", idade: 32, destino: "peru"},
{nome: "priscila", idade: 40, destino: "rio de janeiro"},
{nome: "paula", idade: 39, destino: "londres"},
{nome: "simone", idade: 42, destino: "bahia"},
{nome: "leticia", idade: 26, destino: "argentina"},
{nome: "raissa", idade: 41, destino: "sao paulo"},
{nome: "ana", idade: 15, destino: "suecia"},
]
};
sortDir: boolean = true;
list: any = []
ngOnInit(): void {
let convert = Object.values(this.infos);
this.lista = convert[2]
}
funcSort(type: string, prop: string){
//prop would be the second property so that when I pass the function in HTML, I specify which
//property of the object I want to sort
if(type == 'string'){
if(this.sortDir == false){
this.list.sort(( a: any, b: any ) =>
b.prop.localeCompare(a.prop))
this.sortDir = true
}else if(this.sortDir == true){
this.list.sort(( a: any, b: any ) =>
a.prop.localeCompare(b.prop))
this.sortDir = false
}
console.log('string type!')
}
else if(type == 'number'){
if(this.sortDir == false){
this.list.sort(( a: any, b: any ) =>
b.prop- a.prop))
this.sortDir = true
}else if(this.sortDir == true){
this.list.sort(( a: any, b: any ) =>
a.prop- b.prop))
this.sortDir = false
}
console.log('number type!')
}
else if(type == 'date'){
if(this.sortDir == false){
this.list.sort(( a: any, b: any ) =>
new Date(b.prop).valueOf() - new Date(a.prop).valueOf())
this.sortDir = true
}else if(this.sortDir == true){
this.list.sort(( a: any, b: any ) =>
new Date(b.prop).valueOf() - new Date(a.prop).valueOf())
this.sortDir = false
}
console.log('date type!')
}
}
此代码不起作用，因为“a.prop.localeCompare(b.prop.localeCompare)”不存在，并且控制台在 a.prop 和 b.prop 上显示错误。 所以我想知道是否有一种方法可以在排序方法上使用另一个道具，一种重用一段代码对相同类型列进行排序的方法，也许可以将 localeCompare 更改为 1, -1 方式？我尝试过但没成功...
当您使用字符串访问特定属性时，我们不能执行
test.propproptest[prop]import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<table>
<tr>
<th (click)="funcSort('string', 'name')">Name</th>
<th (click)="funcSort('string', 'food')">Favorite Food</th>
<th (click)="funcSort('number', 'age')">Age</th>
<th (click)="funcSort('date', 'birth')">Birth</th>
<th (click)="funcSort('number', 'carbs')">Carbs</th>
<th (click)="funcSort('date', 'training')">Training day</th>
</tr>
<tr *ngFor="let item of list">
<td>{{item.name}}</td>
<td>{{item.food}}</td>
<td>{{item.age}}</td>
<td>{{item.birth}}</td>
<td>{{item.carbs}}</td>
<td>{{item.training}}</td>
</tr>
</table>
`,
})
export class App {
infos: any = {
name: 'stack',
example: 'example..',
details: [
{
name: 'ingrid',
age: 12,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'carrot',
carbs: 1200,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'ester',
age: 22,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'apple',
carbs: 3456,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'sara',
age: 52,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'banana',
carbs: 756896,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'laura',
age: 32,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'potato',
carbs: 1243,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'priscila',
age: 40,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'tomato',
carbs: 2546,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'paula',
age: 39,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'beans',
carbs: 1234,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'simone',
age: 42,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'radish',
carbs: 345,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'leticia',
age: 26,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'fried rice',
carbs: 12000,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'raissa',
age: 41,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'rice',
carbs: 1500,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
{
name: 'ana',
age: 15,
birth: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
food: 'chapathi',
carbs: 1300,
training: this.randomDate(new Date(2020, 0, 1), new Date(), 0, 24),
},
],
};
sortDir: boolean = true;
list: any = [];
constructor() {}
ngOnInit(): void {
let convert = Object.values(this.infos);
this.list = convert[2];
}
funcSort(type: string, prop: string) {
//prop would be the second property so that when I pass the function in HTML, I specify which
//property of the object I want to sort
if (type == 'string') {
if (!this.sortDir) {
this.list.sort((a: any, b: any) => b[prop].localeCompare(a[prop]));
this.sortDir = true;
} else {
this.list.sort((a: any, b: any) => a[prop].localeCompare(b[prop]));
this.sortDir = false;
}
console.log('string type!');
} else if (type == 'number') {
if (!this.sortDir) {
this.list.sort((a: any, b: any) => b[prop] - a[prop]);
this.sortDir = true;
} else {
this.list.sort((a: any, b: any) => a[prop] - b[prop]);
this.sortDir = false;
}
console.log('number type!');
} else if (type == 'date') {
if (!this.sortDir) {
this.list.sort(
(a: any, b: any) =>
new Date(b[prop]).valueOf() - new Date(a[prop]).valueOf()
);
this.sortDir = true;
} else {
this.list.sort(
(a: any, b: any) =>
new Date(a[prop]).valueOf() - new Date(b[prop]).valueOf()
);
this.sortDir = false;
}
console.log('date type!');
}
}
randomDate(start: any, end: any, startHour: any, endHour: any) {
var date = new Date(+start + Math.random() * (end - start));
var hour = (startHour + Math.random() * (endHour - startHour)) | 0;
date.setHours(hour);
return date.toISOString().slice(0, 10);
}
}
bootstrapApplication(App);