Привязка данных в HTML ввод в * ngFor в Angular 8

Question

Я использую * ngFor для l oop через массив объектов и отображаю значение в HTML. В HTML значение отображается во входном элементе, так как я хочу, чтобы пользователь изменил значение при необходимости, а затем сохранил измененное значение с помощью кнопки Сохранить. К сожалению, привязка данных не работает вообще. Значения из массива не отображаются. Вот мой код:

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
<td>
  <input type="number" name=a{{index}} [(ngModel)]="rrReasons[index].signatory1">
</td>

А это json:

{"signature1": "1009648", "signature2": "1003444" ,}

Answer 1

Вы используете rrReasons[index].signatory1. index недоступно как переменная внутри l oop.

Вместо этого следует использовать rrReasons[i].signatory1 или data.signatory1.

<table>
  <tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
    <td>
      <input type="number" name=a{{i}} [(ngModel)]="rrReasons[i].signatory1">
    </td>
</table>

DEMO: https://stackblitz.com/edit/angular-zmscxv

Answer 2

Ваш код TS должен быть похож на

rrReasons = [{
    "signatory1": "1009648",
    "signatory2": "1003444",
  },
  {
    "signatory1": "1009649",
    "signatory2": "1003445",
  },
  {
    "signatory1": "1009650",
    "signatory2": "1003446",
  },
  {
    "signatory1": "1009651",
    "signatory2": "1003447",
  },
  {
    "signatory1": "1009652",
    "signatory2": "1003448",
  }
]

HTML код должен быть похож на

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
  <td>
    <input type="number" name=a{{index}} [(ngModel)]="data.signatory1">
  </td>
</tr>

Примечание: пока вы зацикливаете массив, вы должны использовать значение итератора для получить фактическое значение объекта.

Рабочий пример: - Демо

Answer 3

Вам необходимо использовать ngModel для двухсторонней привязки данных. Это автоматически сохранит вашу привязку в синхронизации c.

Я создал рабочий экземпляр стекаблица здесь - https://stackblitz.com/edit/angular-8kca94

Вы можете прочитать о NgModel здесь - https://angular.io/api/forms/NgModel

Ниже приведен фрагмент кода:

<div *ngFor="let element of arr">
  <input [value]="element.value" [name]="element.value" [(ngModel)]="element.value" />
</div>

Код машинописного текста здесь:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  arr = [
    {id: 1, value: 'value1'},
    {id: 2, value: 'value2'},
    ]
}