时间戳

首页 > 解决方案 > ngAfterViewInit 更改时，Angular 不会将值更新为 View

html - ngAfterViewInit 更改时，Angular 不会将值更新为 View

问题描述

我有这个考虑

<span [ngStyle]="{width: optionActiveWindowSize}" class="option-active-window"></span>

<ng-container *ngFor="let op of options; let i = index">
   <div [ngClass]="{active: i === activeIndex"}></div>
</ng-container>

TS代码

ngAfterViewInit(): void {
    const activeOption = 
    this.horizontalOptionRef.nativeElement.getElementsByClassName('active');
    this.optionActiveWindowSize = activeOption[0].offsetWidth + 'px';
}

optionActiveWindowSize 的值在 afterViewInit 中更改后不会在 DOM 中更改。你能告诉我为什么以及如何解决它吗？

标签： htmlangulartypescript

解决方案

可能有几个问题。

  1. 确保optionActiveWindowSize具有px最后定义的字符串值，例如，

    例如。optionActiveWindowSize = '20px'. 然后，

    [ngStyle]="{width: optionActiveWindowSize}"

    应该管用。

  2. 我假设 optionActiveWindowSize的数值类似于optionActiveWindowSize = 20，那么您应该将其更改为，

     [ngStyle]="{ 'width.px': optionActiveWindowSize}"

或者

     [style.width.px]="optionActiveWindowSize"

希望，这会有所帮助！

注意：忘了提到@M Fuat NUROGLU，span没有width道具。因此，您可能希望将其更改为div.

推荐阅读