Угловой 5 и переход только в "новые" предметы

Question

Шаблон моего компонента отображает список:

<div class="row">
  <div *ngFor="let m of activeModules" [@enterAnimation]>
    {{ m.name }}
  </div>
</div>

Компонент оживляет его

@Component({
  selector: 'app-client-detail',
  templateUrl: './client-detail.component.html',
  styleUrls: ['./client-detail.component.scss'],
  animations: [

    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({ opacity: 0 }),
          animate('1000ms', style({ opacity: 1}))
        ]),
        transition(':leave', [
          style({ opacity: 1 }),
          animate('1000ms', style({ opacity: 0}))
        ])
      ]
    )
  ]
})
export class ClientDetailComponent implements OnInit {
   activeModules = [{ name: 'modulo 1'}, { name: 'modulo 2'}];
}

Это отлично работает, у div'ов есть переход от непрозрачности. Если я сделаю что-то вроде этого:

ngOnInit() {
  Observable.timer(2000).subscribe(() => {
    this.activeModules =  [{ name: 'modulo 1'}, { name: 'modulo 3'}, { name: 'modulo 2'}];
}

массив activeModules обновляется, и шаблоны снова отображают список с переходом. Моя проблема в том, что для перехода мне нужны только "новые" элементы из массива (в данном случае - посередине). Является ли это возможным?

Answer 1

Конечно, вам просто нужно нажать на ваш элемент вместо того, чтобы снова создавать свой массив.

Давайте сделаем функцию для этого:

pushAt(arr, index, item) {
  arr.splice(index, 0, item); 
}

Теперь вы можете просто

ngOnInit() {
  Observable.timer(2000).subscribe(() => this.pushAt(this.activeModules, 1, { name: 'Modulo 2' }));
}

РЕДАКТИРОВАТЬ, может быть, вы можете попробовать с пользовательской функцией трекби:

customTrackBy(index, item) { return index; }

В вашем HTML

<div *ngFor="let m of activeModules; trackBy: customTrackBy;" [@enterAnimation]>