当索引超过 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

键值管道对您提供的键进行排序。结果 'CR10' < 'CR2' 并且它出现在列表的上方。我建议将您的数据结构保留为 {key: string, value: string} 个对象的数组，并消除键值管道

的使用

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

Template view changes iterating through JSON object when index goes beyond 10

json

angular

ngfor