Question

我正在尝试通过查询元素的高度来设置一些CSS属性。

我正在执行以下操作：

<div class="floor" *ngFor="let floor of floors">
    <div class="floor-number-container" #floorNumber [ngStyle]="{ 'left.px' : - floorHeight - 20 }">
        <div class="floor-number" [ngStyle]="{'width.px' : floorHeight}">
            {{ floor }}
        </div>
    </div>
</div>

在班级里面：

@ViewChildren('floorNumber') floorNumbers: QueryList<ElementRef>;

ngAfterViewInit(): void {
    this.floorHeight = this.floorNumbers.first.nativeElement.offsetHeight;
}

它可以工作，但是出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式已更改经过检查后。上一个值：“ left.px：-20”。当前值： 'left.px：-64'。

而且我不知道如何解决该问题以避免该错误。是否可以告诉[ngStyle]在floorHeight得到一个值之前什么都不做？

编辑：

我通过以下操作对其进行了修复：

setTimeout(() => this.floorHeight = this.floorNumbers.first.nativeElement.offsetHeight, 0);

但是我不喜欢这种黑客手段

Answer 1

我设法通过以下方法消除了错误：

setTimeout(() => this.floorHeight = this.floorNumbers.first.nativeElement.offsetHeight, 0);

如果有人有更清洁的方式，请随时分享！

角度-动态设置CSS-ExpressionChangedAfterItHaHasBeenCheckedError

1 个答案: