角垫自动完成-动态添加/删除项目问题 [英] Angular mat-autocomplete - Dynamic add/delete item issue

问题描述

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

I'm trying to create a simple form with a dynamic number of mat-autocomplete fields. However, in some cases, the inputs' displayed values get lost.

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>

我做了一个 StackBlitz 展示问题.如果您:

I've made a StackBlitz to showcase the issue. If you:

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

1. Select an item in the second autocomplete field (e.g. Item 2)
2. Remove the item from the first autocomplete field (using the x at the end of the field)
3. Click Add Item to add another one

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

The first autocomplete field will then show an empty value, instead of keeping the one it had.

有人可以帮我弄清楚为什么会失去价值吗?这是处理动态数量的自动完成字段的错误方法吗?

Could anyone help me figure out why the value is lost? Is this the wrong way of dealing with a dynamic number of autocomplete fields?

推荐答案

角度无法跟踪数组中的项目，也不知道已删除或添加了哪些项目.

angular can’t keep track of items in the array and has no knowledge of which items have been removed or added.

因此，Angular需要删除与数据关联的所有DOM元素，然后再次创建它们.这意味着很多DOM操作.

As a result, Angular needs to remove all the DOM elements that associated with the data and create them again. That means a lot of DOM manipulations.

但是您可以尝试使用自定义trackby:

but you can try with a custom trackby :

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

演示

这篇关于角垫自动完成-动态添加/删除项目问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！