Блог

У меня есть объект JSON, ключи которого являются случайными, но в этом случае я буду использовать Id и Name в качестве примера:

{Id: "someID", Name: "some name"}

И я пытаюсь отобразить каждый ключ и значение этого объекта, но разрешаю пользователю редактировать значение с помощью <input> тега.

 <div>
    <p *ngFor="let item of data | keyvalue">
        Key: {{item.key}}: <input [(ngModel)]="item.value">, {{item.value}}, {{data[item.key]}}</p>
</div>
  

Когда пользователь вносит изменения в поле ввода, ввод на экране изменяется (т.Е. item.value ) — но объект данных не обновляется (т.Е. data[item.key] ).).
Я могу использовать ngModelChange or (input)="onchange"($event, item.key)" или [(ngModel)]="data[item.key] для обновления объекта данных; однако это приводит к тому, что поле ввода теряет фокус, поэтому за один раз можно изменить только один символ.

Я полагаю, что проблема кроется где-то в канале keyvalue — поскольку у меня нет проблем с использованием предопределенных ключей ie. <input [(ngModel)]="data.id"> — но, очевидно, поскольку ключи внутри объекта являются случайными, я не могу это использовать.

Итак: есть ли способ использовать ngModel для обновления значения внутри объекта. Или есть какой-либо другой способ обновить значение объекта и отобразить его на экране и в поле ввода?

Изменения не отражаются в, data[item.key] потому что keyvalue канал возвращает новый массив новых объектов с теми же ключами, что и в исходных объектах. Это означает, что ngModel мутация не окажет никакого влияния на исходный data объект.

Ваше решение — использовать обозначение в квадратных скобках с trackBy опцией:

HTML

 <p *ngFor="let item of data | keyvalue; trackBy: trackByFn">
  Key: {{item.key}}: <input [(ngModel)]="data[item.key]">
        {{item.value}}, {{data[item.key]}}
</p>
  

ts

 trackByFn(item) {
  return item;
}
  

Пример Ng-run