如何保存Angular语句输入? [英] How to save statement input Angular?

问题描述

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

每5秒从服务器收到的对象数组中的items.

Where items in array of objects that is received from server each 5 seconds.

问题是如果填充输入<input size="7" />，它将在下一次渲染后被替换.如何保存这些输入的语句?

Problem is if fill inputs <input size="7" /> it will be replaced after next rendering. How to save the statement of these inputs?

推荐答案

当更改集合中的项目并通过*ngFor呈现时，Angular将重新创建 DOM元素.默认情况下，Angular将通过对值进行===比较来跟踪项目的唯一性.

Angular will recreate DOM elements when items in a collection are changed and rendered via *ngFor. By default, Angular will track how items are unique by using an === comparison on the values.

每隔5秒从服务器接收的对象数组中的项目.

Where items in array of objects that is received from server each 5 seconds.

就像是说，items数组是每5秒钟一个 new数组.因此，每个 item 都是一个 new item ，而*ngFor将重新创建每个DOM元素.

Likely means, that the items array is a new array every 5 seconds. So each item is a new item, and *ngFor will recreate each DOM element.

您必须使用trackby来告诉Angular使用item.id作为唯一标识符.

You have to use a trackby to tell Angular to use the item.id as the unique identifier.

<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;

这篇关于如何保存Angular语句输入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！