0

我正在尝试创建一个具有动态数量的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>

我做了一个 StackBlitz 来展示这个问题。如果你：

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

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

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

4

1 回答 1

2

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

演示

于 2018-10-21T10:47:39.553 回答