我遇到了一个非常奇怪的角度问题。我在 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：
<html>
<table>
<tr *ngFor="let item of myArray; let i = index">
<td>
<input type="text" [value]='item'>
</td>
</tr>
</table>
<button (click)="change()">Change</button>
</html>
问题解释示例视频： https://www.loom.com/share/6f4887183bb94150ad7390f25e5b466a
正如您所看到的，当我在输入中输入某些内容并更改数组时，该值仍保留在数组中。我已经检查过原始数组没有改变。
我的意思是它只是被逆转了，但没有别的。
问题是什么？
您应该使用trackby：
<table>
<tr *ngFor="let item of myArray; let i = index ;trackBy: trackItem" >
<td>
<input type="text" [value]='item' >
</td>
</tr>
</table>
<button (click)="change()">Change</button>
在 ts 中：
trackItem (index, item) {
return this.myArray ? this.myArray : undefined;
}
如果你想保留该值，你应该使用 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：
默认情况下，当您使用 *ngFor 而不使用 trackBy 时，*ngFor 会跟踪通过对象标识更改的对象数组。因此，如果将对象数组的新引用传递给指令，即使该数组具有相同的值，Angular 将无法检测到它们已经在当前 DOM 中绘制和呈现。相反，旧元素将被删除，并重新绘制具有相同值的新集合。 我们可以通过提供 trackBy 函数来帮助 Angular 跟踪添加或删除的项目。 trackBy 函数将索引和当前项目作为参数，并需要返回该项目的唯一标识符。现在，当您更改集合时，Angular 可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。
在以下情况下使用 trackBy：
1 - 迭代大型对象集合数组
2 - 您的业务逻辑可能需要通过重新排序、修改特定项目、删除项目或添加新项目来修改任何这些元素
Проверьте пожалуйста в компоненте с циклом настройки
@Component({
--->changeDetection: ChangeDetectionStrategy.OnPush<---
})
Если данная настройка стоит, попробуйте убрать ее. Но рекомендую разобраться, что это и для чего.