Angular mat-autocomplete - 动态 add/delete 项目问题

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>

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

Select an item in the second autocomplete field (e.g. Item 2)

Remove the item from the first autocomplete field (using the x at the end of the field)

Click Add Item to add another one

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

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

Answer 1

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

因此，Angular 需要删除与数据关联的所有 DOM 元素并重新创建它们。这意味着很多 DOM 操作。

但您可以尝试使用自定义 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;
}

DEMO

Angular mat-autocomplete - 动态 add/delete 项目问题

Angular mat-autocomplete - Dynamic add/delete item issue

angular-material

ngfor

angular

mat-autocomplete

组件的脚本

组件的视图