angular - 使用 *ngIf 显示后如何获取元素？

Question

我经常遇到这个问题。我有一个元素，如图所示

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

默认情况下，isShown = false; 通过点击一个元素，我正在制作 isShown = true;

现在，在同一个点击回调函数中如果我尝试获取 element-1 as

$('.element-1')，我没有得到那个元素，因为当 isShown = true 时它可能不会立即出现在 DOM 中。

我可以使用 ngAfterContentChecked 获得相同的结果。但是 ngAfterContentChecked 调用了很多次。

那么，如何不使用 ngAfterContentChecked 获取元素呢？

编辑

这是我的元素

<app-card-kpi-inline-overlay #kpisOverlay class="child-component all-kpis-overlay-wrap {{selectedView}}" [style.left.px]="kpiLeft" *ngIf="data['openKpiDetails']==true" [cardData]="data"></app-card-kpi-inline-overlay>

这是我的ts方法代码

@ViewChild('kpisOverlay') kpisOverlay: ElementRef;

showKpiSection(i, event, card) {
    card['openKpiDetails'] = !card['openKpiDetails'];
    event.stopPropagation();
    if (card['openKpiDetails']) {
        setTimeout(() => { 
            const el: HTMLElement = this.kpisOverlay.nativeElement; 
            console.log(el); // always showing undefined
        }, 0);
    }
}

我正在尝试切换标志。但是控制台总是打印undefined。

下面是我的切换元素

<div (click)="showKpiSection(i, $event, data)">Get element</div>

Answer 1

我永远不会说够:

Using JQuery with Angular is an anti-pattern. You should not touch the DOM yourself, you should let the framework do it for you.

现在，以完整的 Angular 方式:

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

在你的 TS 中:

@ViewChild('firstElement') firstElement: ElementRef;

如果你想要这个元素，在你的函数中，一旦 isShown 的值设置为 true，就使用这个

const el: HTMLElement = this.firstElement.nativeElement;

如果不起作用，则触发更改检测，因为这意味着 Angular 尚未完成更改检测。

编辑 由于您的组件处于循环中，因此您应该改用@ViewChildren。

我做了一个工作 StackBlitz 给你看代码，原理基本一样，只是元素变成了元素数组。