Как сохранить входной оператор Angular?

Question

<tr *ngFor="let item of items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7" /></td>
</tr>

Где items в массиве объектов, получаемых от сервера каждые 5 секунд.

Проблема в том, что при заполнении входных данных <input size="7" /> он будет заменен после следующего рендеринга. Как сохранить выписку из этих входов?

Answer 1

Angular будет воссоздавать элементы DOM, когда элементы в коллекции изменяются и отображаются с помощью *ngFor. По умолчанию Angular отслеживает уникальность элементов, используя сравнение значений ===.

Где элементы в массиве объектов, получаемые с сервера каждые 5 секунд.

Вероятно, означает, что массив items представляет собой новый массив каждые 5 секунд. Таким образом, каждый элемент является новым элементом , и *ngFor будет воссоздавать каждый элемент DOM.

Вы должны использовать trackby, чтобы указать Angular использоватьitem.id как уникальный идентификатор.

<tr *ngFor="let item of items; trackby: trackItems">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7" /></td>
</tr>

Компонент:

   const trackItems = (indx, item) => item.id;

Answer 2

попробуйте это:

<table class="table table-sm">
    <tr *ngFor="let item of items;let index = index;trackBy:trackByIndex;">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.score}}</td>
        <td>
            <input [(ngModel)]="items[index].YourPropName">
        </td>
    </tr>
</table>

затем в вашем компоненте:

trackByIndex(index: number, obj: any): any {
  return index;
}

Answer 3

Попробуйте так:

<table>
  <tr *ngFor="let item of items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7" [(ngModel)]="item.value"/></td>
  </tr>
</table>

Рабочая демоверсия

Согласно вашему комментарию, попробуйте так:

Шаблон:

<tr *ngFor="let item of items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7"  (change)="onChange(item.id, $event.target.value)"/></td>
</tr>

TS:

  model = [];


  onChange(id,value) {
    this.model.push({id:id,value:value})
  }

Answer 4

Вы можете использовать trackBy для предотвращения создания элементов при каждом обновлении ngFor ... вы также можете использовать другой объект для добавления значений при каждом обновлении массива ...

Пример

refreshItems(){
    // items receifved every 5 seconds..
    this.received = [
    {
      id:1,
      name: 'name: ',
      score: Math.floor(Math.random() * 6) + 1  
    },
    {
      id:2,
      name: 'name2: ',
      score: Math.floor(Math.random() * 6) + 1  
    }
    ];
    this.items = this.received.map(received => {
      return {
        ...received,
        value: this.items.find(item => item.id === received.id).value || '',
      }
    });
  }