当索引超过10时，模板视图更改遍历JSON对象

Question

我有这样的JSON对象。

{
CR1: "aaa"
CR2: "bbb*2"
CR3: "ccc/2"
CR4: "ddd-23"
CR5: ""
CR6: "SS"
CR7: ""
}

在“CR”之后的索引是动态添加的，并在使用ngFor迭代时在模板中显示如下所示：

​

​

但是，当CR索引超过10时，视图会发生如下变化：

​

​

下面是模板中的代码：

<div class="row mt-10" *ngFor="let item of computationLogicObj | keyvalue; trackBy: trackByFn">
    <div class="col-md-4">
        <label class="form-control-label" for="field_{{item.key}}">{{item.key}}</label>
    </div>
    <div class="col-md-6">
         <input type="text" class="form-control" id="{{item.key}}" name="{{item.key}}" [(ngModel)]="computationLogicObj[item.key]" [disabled]="!isInternal">
    </div>
    <div class="col-md-2">
        <a (click)="deleteComputationLogic(item.key)">
            <fa-icon [icon]="'times'"></fa-icon>
        </a>
    </div>
</div>

和trackByFn

trackByFn(index: any, item: any) {
        return item.key;
    }

在控制台中，json对象如下所示，这是预期的：

{
CR1: "aaa"
CR2: "bbb*2"
CR3: "ccc/2"
CR4: "ddd-23"
CR5: ""
CR6: ""
CR7: ""
CR8: ""
CR9: ""
CR10: ""
CR11: ""
}

那么到底是什么改变了这个观点呢？

Answer 1

keyvalue管道对您提供的键进行排序。因此，'CR10‘< 'CR2’并显示在列表的首位。我建议将您的数据结构保持为{key: string, value: string}对象的数组，并避免使用keyvalue管道。