Как избежать: введите /: оставить анимацию при изменении значения при использовании * ngFor?

Question

Я использую angular 9 вместе с angular материалом. У меня есть список динамических c строк, которые я хочу редактировать - каждая на отдельном входе. Я также хочу иметь возможность добавлять и удалять их, и иметь некоторые анимации для этого.

Проблема: : ввод и: оставить анимацию включенной при каждом изменении значения.

Stackblitz: https://stackblitz.com/edit/angular-material-baseline2-7pmidv

На данный момент лучшее решение, которое я придумал, это использовать отдельный объект для хранения значений.

public list:{value:string}[] = [{value: "1"}, {value: "2"}, {value:"3"}];

вместо

public list: string[] = ["1", "2", "3"];

Мне было интересно, есть ли лучший способ сделать это.

Answer 1

Это потому, что ngFor работает внутри. Как только ссылка отслеживаемого элемента изменится, ngFor выполнит его повторную визуализацию.

Поскольку javascript не сохраняет ссылки на примитивы в стеке, но значение непосредственно, каждое изменение значения будет изменять значение на стек и, следовательно, ngFor будет повторно визуализировать ваш объект.

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

Однако, чтобы предотвратить это, Angular предлагает trackByFn . Эта функция позволяет вам определить уникальный идентификатор для ваших объектов, и если идентификатор остается прежним, ваш объект не будет перерисован, даже если ссылка / значение изменятся. Поэтому я думаю, что вам лучше всего использовать индекс в качестве уникального идентификатора:

Машинопись:

  trackItem(index:number,item:string){
    return index;
  }

HTML:

<div  [@inOutAnimation] *ngFor="let val of list; index as i;trackBy:trackItem" class="form-field">
    <mat-form-field >
      <mat-label>At</mat-label>
      <input matInput [(ngModel)] = "list[i]">
    </mat-form-field>
    <button mat-icon-button class="add-shift-btn" (click)="removeShift(i)">
      <mat-icon aria-hidden="false" aria-label="Example home icon">delete</mat-icon>
    </button>
   </div>