角度垫自动完成 - 动态添加/删除项目问题

Question

我正在尝试创建一个具有动态数量的mat-autocomplete字段的简单表单。但是，在某些情况下，输入的显示值会丢失。

组件的脚本

export class AutocompleteSimpleExample {
availableItems = [{name: 'item1'}, {name: 'item2'}];
items = [{name: 'item1'}, {}];
addItem() {
this.items.push({});
}
deleteItem(i: number) {
this.items.splice(i, 1);
}
displayObject(obj) {
return obj ? obj.name : null;
}
}

组件视图

<form>
<mat-form-field *ngFor="let item of items; let i = index">
<input matInput [(ngModel)]="items[i]" [matAutocomplete]="itemAutocomplete" name="items[{{i}}]">
<mat-autocomplete #itemAutocomplete="matAutocomplete" [displayWith]="displayObject">
<mat-option *ngFor="let item of availableItems" [value]="item">{{item.name}}</mat-option>
</mat-autocomplete>
<button mat-button mat-icon-button matSuffix type="button" (click)="deleteItem(i)"><mat-icon>close</mat-icon></button>
</mat-form-field>
<button class="btnType01" mat-raised-button type="button" (click)="addItem()"><mat-icon>add</mat-icon>Add Item</button>
</form>

我做了一个 堆栈闪电战 来展示问题。如果您：

1. 在第二个自动完成字段中选择一个项目(例如Item 2(
2. 从第一个自动完成字段中删除项目(使用字段末尾的x(
3. 单击Add Item以添加另一个

然后，第一个自动完成字段将显示一个空值，而不是 保留它拥有的那个。

谁能帮我弄清楚为什么价值丢失了？这是处理动态数量的自动完成字段的错误方法吗？

Answer 1

angular 无法跟踪数组中的项目，也不知道哪些项目已被删除或添加。

因此，Angular 需要删除所有与数据关联的 DOM 元素并再次创建它们。这意味着大量的 DOM 操作。

但是您可以尝试使用自定义跟踪：

<form>
<mat-form-field *ngFor="let item of items; let i = index; trackBy:customTrackBy">
<input matInput [(ngModel)]="items[i]" [matAutocomplete]="itemAutocomplete"
name="items[{{i}}]">
<mat-autocomplete #itemAutocomplete="matAutocomplete" [displayWith]="displayObject">
<mat-option *ngFor="let item of availableItems" [value]="item">{{item.name}}      </mat-option>
</mat-autocomplete>
<button mat-button mat-icon-button matSuffix type="button" (click)="deleteItem(i)"><mat-icon>close</mat-icon></button>
</mat-form-field>
<button class="btnType01" mat-raised-button type="button" (click)="addItem()"><mat-icon>add</mat-icon>Add Item</button>

</form>

TS：

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

演示