在Angular 6中,ngFor指令可以使用keyvalue管道来遍历对象的属性和值。同时,你可以使用sort方法对对象进行排序。
下面是一个示例代码:
component.ts文件:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
{{item.key}}: {{item.value}}
`
})
export class MyComponent {
items = { 'c': 3, 'a': 1, 'b': 2 };
get sortedItems() {
return Object.keys(this.items).sort().reduce((obj, key) => {
obj[key] = this.items[key];
return obj;
}, {});
}
}
在这个示例中,我们有一个items对象,它包含了一些属性和值。我们使用keyvalue管道将items对象转换为一个数组,其中每个元素都包含了属性和值。
为了对items对象进行排序,我们使用了Object.keys方法获取对象的所有属性,并且使用sort方法对属性进行排序。然后,我们使用reduce方法创建一个新的对象,其中属性是已排序的属性,值是原始对象中对应属性的值。
最后,我们在模板中使用ngFor指令遍历sortedItems数组,并显示每个元素的属性和值。
请注意,keyvalue管道和sort方法都是Angular 6中的新功能,所以请确保你的Angular版本符合要求。