Как получить элемент после его отображения с помощью *ngIf?

Я никогда не скажу этого достаточно:

Использование JQuery с Angular — это антишаблон. Вы не должны трогать DOM самостоятельно, вы должны позволить фреймворку сделать это за вас.

Теперь в полном ANgular:

<div #firstElement *ngIf="isShown"></div>

В вашем ТС:

@ViewChild('firstElement') firstElement: ElementRef;

Если вы хотите, чтобы элемент в вашей функции, как только значение isShown установлено в true, используйте это

const el: HTMLElement = this.firstElement.nativeElement;

Если это не сработает, активируйте обнаружение изменений, потому что это означает, что Angular еще не закончил обнаружение изменений.

EDIT Поскольку ваш компонент находится в цикле, вместо него следует использовать @ViewChildren.

Я сделал рабочий StackBlitz для вас посмотрите на код, это в основном тот же принцип, только элемент становится массивом элементов.

Вы должны определить свой элемент следующим образом:

<div #element-1 class="element-1" *ngIf="isShown"></div>

А затем получить к нему доступ с помощью

@ViewChild('element-1') element1;

в вашем Компоненте. Пример на этой странице выглядит близко к тому, что вы пытаетесь сделать: https://angular.io/api/core/ViewChild

Вы можете воспользоваться преимуществами поведения @ViewChild и @ViewChildren:

Декоратор свойств, который настраивает запрос представления. Детектор изменений ищет первый элемент или директиву, соответствующую селектору в представлении DOM. Если представление DOM изменяется и новый дочерний элемент соответствует селектору, свойство обновляется.

<сильный>1. Подход ViewChild с использованием setter

Важной частью является Если DOM представления изменяется, что означает, что в этом случае это будет срабатывать только при создании или уничтожении элемента.

Сначала объявите имя переменной для элемента, для примера я использовал #element1

<div #element1 class="element-1" *ngIf="isShown"></div>

Затем добавьте ссылку @ViewChild внутри вашего компонента:

@ViewChild('element1') set element1(element) {
  if (element) {
     // here you get access only when element is rendered (or destroyed)
  }
}

<сильный>2. Подход ViewChildren с использованием Observables

Другое решение — подписаться на @ViewChildren change observable вместо использования @ViewChild, например:

@ViewChildren('element1')
private element1: QueryList<any>;

А затем подпишитесь на его наблюдаемое изменение:

element1.changes.subscribe((d: QueryList<any>) => {
  if (d.length) {
    // here you get access only when element is rendered
  }
});

Я предпочел последний способ, потому что мне было проще обрабатывать наблюдаемые объекты, чем проверки внутри setter's, а также этот подход ближе к концепции Event.