基于另一个html元素的位置的角度设置ngStyle边距

问题描述

在视图中，我有一个表标记为视图变量，如下所示：

<table #mainTable class="country-fiches-table" cellspacing="0" border="1">

同一组件中的mainTableX组件变量是这样形成的：

this.mainTableX = this.mainTable ? this.mainTable.nativeElement.offsetLeft : 0;

我希望将此mainTableX用作另一个html元素的边距，如下所示：

<div [ngStyle]="{ 'margin-left': mainTableX ? mainTableX : '0' }">another element</div>

我知道在这里要做的最有用的建议是指向角度生命周期，但是它并没有真正表明如何在其他元素上精确使用有关ALDERY RENDERED ELEMENT位置的信息。

对此有何建议？如果将其放入比渲染时间（特别是ngAfterContentInit）早的生命周期的方法中，则不会形成mainTableX，因此会产生0作为边距。但是，如果我将其放在渲染后触发的生命周期方法中（特别是ngAfterViewChecked），则会收到错误消息：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 

解决方法

我认为您应该在设置超时下提供您的逻辑。这样可以解决您的问题。

ngAfterViewInit() {
    setTimeout(() => {
        this.mainTableX = this.mainTable ? this.mainTable.nativeElement.offsetLeft : 0;
  },200);
}