Как вы запускаете некоторый код после добавления элемента в ngFor в Angular 2+?

1

У меня есть функция в моем компоненте, которая добавляет элемент в массив, который отображается в представлении * ngFor.

Я хочу нацелить добавленный элемент на id и прокручивать его после добавления в массив. Проблема заключается в том, что этот код запускается до добавления элемента в представление.

Как мне это сделать в Angular 2+?

  • 0
    Это касается только начального добавления или добавления элементов в массив, для которого вы используете *ngFor ?
  • 0
    Это когда вы добавляете элементы в массив, я использую *ngFor
Теги:
angular
ngfor

1 ответ

2
Лучший ответ

Вы можете использовать настраиваемую директиву, которая делает уведомление:

@Directive({ selector: '[afterAdd]')
class MyDirective {
  @Output() added:EventEmitter = new EventEmitter();
  ngAfterContentInit() {
    this.added.next(null);
  }
}

и используйте его так:

<div *ngFor="let item of items" afterAdd (added)="doSomething(item)">

таким образом doSomething() в родительском компоненте будет вызываться для каждого элемента, добавленного *ngFor (также для исходного добавления всех элементов в массиве)

в качестве альтернативы вы также можете обеспечить, чтобы элемент был добавлен в DOM, например

constructor(private cdRef:ChangeDetectorRef) {}

...
this.items.push(newItem);
this.cdRef.detectChanges(); // sync
// here the item was added to the DOM already
Поделиться
  • 0
    Хорошее решение Однако я не хочу запускать это при начальном добавлении всех элементов. Я хочу прокрутить вниз до последнего элемента, только если он добавлен в уже существующий список.
  • 0
    Тогда вы можете использовать второй подход, который я указал.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню