如何保存语句输入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.

问题是如果填充输入 它将在下一次渲染后被替换.如何保存这些输入的语句?

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 秒.所以每个 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屋！