Question

data[1][2] = 1500
print(data)

说，上面有一个模板。我想在每次调用方法时设置工具提示的位置：

<ng-container *ngIf="show">
  <div #tooltip>
    // some elements
  </div>
</ng-container>

但是，当我运行这段代码时，我得到一个错误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'); }，我猜这是因为我将Cannot read property 'nativeElement' of undefined属性重置为show以来DOM没有得到更新，所以{{ 1}}属性在DOM中不存在。

所以我不得不使用true属性：

tooltip

这种方式没有问题，但是我想知道是否还有其他解决方法可以使其与hidden方法一起使用。任何见识将不胜感激！

Answer 1

您可以将样式移至模板并为其提供动态值。仅当有效calculateLeft在DOM中时才会调用#tooltip方法。

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

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';
    }
}

和HTML：

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

Answer 2

通过导入angular的ChangeDetectorRef来强制DOM检测更改，以尝试this.ref.detectChanges（）。这是相同的文档： https://angular.io/api/core/ChangeDetectorRef

* ng如果Angular中的DOM更新计时问题

2 个答案: