Angular mat-autocomplete - Динамическая проблема добавления / удаления элемента - PullRequest
Новая
       27

Angular mat-autocomplete - Динамическая проблема добавления / удаления элемента

0 голосов
/ 21 октября 2018

Я пытаюсь создать простую форму с динамическим числом 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, чтобы добавить еще одно

В первом поле автозаполнения будет показано пустое значение вместо того, чтобы сохранить то, которое было у него.

Может ли кто-нибудь помочь мне понять, почему потеряно значение?Это неправильный способ работы с динамическим числом полей автозаполнения?

1 Ответ

0 голосов
/ 21 октября 2018

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

DEMO

...