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

Question

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

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

默认， isShown = false;

点击一个元素，我正在 isShown = true;

现在，在相同的点击回调函数，如果我试图让element-1作为

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

我可以使用得到相同的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

我永远不会说够：

在 Angular 中使用 JQuery 是一种反模式。你不应该自己接触 DOM，你应该让框架为你做。

现在，以完整的角度方式：

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

在您的 TS 中：

@ViewChild('firstElement') firstElement: ElementRef;

如果您想要该元素，在您的函数中，一旦将 的值isShown设置为 true，请使用此

const el: HTMLElement = this.firstElement.nativeElement;

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

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

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