Angular ngFor out of order

Question

我有一个月数组。由于某些原因，循环的角度不遵循阵列的顺序。这怎么能解决？

@Component({
selector: 'my-app',
template: `<div *ngFor="let item of collection | keyvalue; index as i">{{item | json}}</div>`,
})
export class AppComponent  {
collection : {key : any, value : any}[] = [];
constructor(){
let i = 0;
for(let month of moment().locale('en-US').localeData().monthsShort()){
i++;
this.collection.push({key : i,value : month});
}
}

https://stackblitz.com/edit/angular-i25npn?file=src%2Fapp%2Fapp.component.ts

Answer 1

根据文档中keyvalue的定义。

输出数组将按键排序。默认情况下，比较器将按Unicode点值。。。

因此，您的密钥(字符串(在默认情况下是有序的。

从*ngFor中移除管道| keyvalue; index as i。

Answer 2

若要遵循订单，请替换：

<div *ngFor="let item of collection | keyvalue; index as i">{{item | json}}</div>

发件人：

<div *ngFor="let item of collection">{{item | json}}</div>