*ngIf DOM在Angular中更新定时问题

但是当我运行这段代码时，我得到一个错误

无法读取未定义的

的属性'nativeElement'，我猜自从我将

show

属性重置为

true

后，DOM就没有更新过该属性，因此

工具提示

属性在DOM中不存在

所以我不得不使用

隐藏的
属性：

export class AComponent {
 @ViewChild('tooltip') tooltip: ElementRef;
 show: boolean;

 constructor(
   private renderer: Renderer2
 )

 methodA(e: MouseEvent): void {
  this.show = true;
  const tooltip = this.tooltip.nativeElement;

  this.renderer.setStyle(tooltip, 'left', e.offsetX - tooltip.offsetWidth + 'px');
 }


//一些元素

这种方法没有问题，但我想知道是否有其他解决方法可以使它与
*ngIf
方法一起工作。如有任何见解，将不胜感激
 通过导入angular的ChangeDetectorRef来尝试此.ref.detectChanges（），以强制DOM检测更改。
以下是相关文件：
您可以将样式移动到模板中，并为其指定一个动态值。只有在DOM中有有效的工具提示时才会调用
calculateLeft
方法

还请注意，在这种情况下，不需要使用
ViewChild
或
render2
：

<div #tooltip [hidden]="show">
   // some elements
</div>

以及HTML：

import {Component} from '@angular/core';

@Component({
  ...
})
export class AComponent {
    show: boolean;
    lastOffsetX: number;

    public methodA(e: MouseEvent): void {
        this.show = true;
        this.lastOffsetX = e.offsetX;
    }

    public calculateLeft(tooltip) {
        return (this.lastOffsetX - tooltip.offsetWidth) + 'px';
    }
}


你好
点击我
if（this.tooltip）{console.log（this.tooltip）this.renderer.setStyle（this.tooltip.nativeElement，'left'，e.clientX+'px'）；}可以将它放在if
if（this.tooltip）中
@JBNizet这是因为我需要设置
left
，并进行一些计算，这需要元素本身的宽度。我更新了我的问题。@fatemefazli它符合您的建议，因为该方法是连续调用的，但如果该案例是“一次性”事件，这不是一个问题吗？因为当DOM还没有更新时，该方法最初不会运行代码。@DongBin Kim methodA仅在MouseeEvent上调用，对吗？它可能会工作，但我不想手动调用更改检测，因为我正在实现的方法是连续调用的，并且会调用太多更改检测有时，这就是我们如何检测自身无法检测到的变化。您可以设置一个条件来检查元素.length==0，然后才调用它以避免多次调用。我尝试过这种方法，但它给了我一个错误：
ExpressionChangedAfterItHasBeenCheckedError:Expression在被选中后发生了更改。
我猜这是因为methodA被连续调用（在我的应用程序中，它是在
mouseover
事件中调用的，而不是在
click
事件中调用的）如果您从子组件内部更改父组件的字段，则可能会发生异常。但我需要查看实际的代码片段，以指出问题的来源。
import {Component} from '@angular/core';

@Component({
  ...
})
export class AComponent {
    show: boolean;
    lastOffsetX: number;

    public methodA(e: MouseEvent): void {
        this.show = true;
        this.lastOffsetX = e.offsetX;
    }

    public calculateLeft(tooltip) {
        return (this.lastOffsetX - tooltip.offsetWidth) + 'px';
    }
}

<ng-container *ngIf="show">
    <div #tooltip [ngStyle]="{left: calculateLeft(tooltip)}">
        Hello
    </div>
</ng-container>
<button (click)="methodA($event)">Click me</button>