Javascript angular*用于不使用输入重新呈现html表

我被一个很奇怪的问题困扰着。我在ts文件中创建了一个简单的数组，并通过迭代相同的数组来显示一个带有输入的表。现在，当我更改数组（反转它）时，它工作正常，但如果我在更改之前在输入中输入了一些内容，文本将保留在输入中

这是密码

component.ts

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

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'practice';
      myArray = [1,2,3,4,5,6,7];
      change() {
        // this.myArray = [];
        this.myArray.reverse();

      }
    }

我的HTML：

改变

问题解释视频示例：

如您所见，当我在输入中输入一些内容并更改数组时，值将保留在数组中。我已经检查过原始阵列没有改变

我的意思是它只是被颠倒了，但没有别的

问题是什么？

您应该使用：

如果要保留该值，则应使用ngModel进行绑定：

<table>
    <tr *ngFor="let item of myArray; let i = index ;trackBy: trackItem" >
      <td>
        <input type="text" [value]='item' [(ngModel)]="myArray[i]" >
      </td>
    </tr>
  </table>
  <button (click)="change()">Change</button>

改变

检查这个

为什么使用trackby：

默认情况下，在不使用trackBy的情况下使用*ngFor时，*ngFor跟踪通过对象标识更改的对象数组。因此，如果将对象数组的新引用传递给指令，即使该数组具有相同的值，Angular也无法检测它们是否已在当前DOM中绘制和显示。相反，旧元素将被删除，具有相同值的新集合将被重新绘制。 通过提供trackBy函数，我们可以帮助Angular跟踪添加或删除的项目。trackBy函数将索引和当前项作为参数，并需要返回此项的唯一标识符。现在，当您更改集合时，Angular可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目

在以下情况下使用trackBy:

1-迭代大型对象数组集合

---

2-您的业务逻辑可能需要通过重新排序、修改特定项、删除项或添加新项来修改这些元素中的任何一个。您能否解释一下trackBy工作的逻辑？如果您不想停留，请删除

[（ngModel）]=“myArray[i]”。

.ohh：（仍然与概念混淆：（如果你想更好地理解它，这是一个很好的方法。@FatemeFazli还有一个问题，当你从输入中删除现有值时，它保持不变。让我给你看视频。。在这里

trackItem (index, item) {
    return this.myArray ? this.myArray : undefined;
  }

<table>
    <tr *ngFor="let item of myArray; let i = index ;trackBy: trackItem" >
      <td>
        <input type="text" [value]='item' [(ngModel)]="myArray[i]" >
      </td>
    </tr>
  </table>
  <button (click)="change()">Change</button>