Angular не обновляет значение View при изменении в ngAfterViewInit

Question

Я имею это ввиду

<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 Code

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

Значение optionActiveWindowSize не изменяется в DOM после того, как оно было изменено в afterViewInit. Подскажите пожалуйста, почему и как это исправить?

Answer 1

Вы привязываете стили после того, как эти стили уже отрисованы.

нет события l oop для его отслеживания.

см. Подробную информацию здесь: https://angular.io/api/core/AfterViewInit

Если вы хотите использовать эти стили до отображения страницы.

используйте это:

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

В вашем

ngOnInit() 

метод.

Answer 2

Я нашел причину. Это потому, что changeDetection - это ChangeDetectionStrategy.OnPu sh.

changeDetection: ChangeDetectionStrategy.OnPush

Answer 3

Может возникнуть пара проблем.

1. Убедитесь, что optionActiveWindowSize имеет строковое значение с px, определенным в конце, например,

   например. optionActiveWindowSize = '20px'. Тогда

   [ngStyle]="{width: optionActiveWindowSize}"
   

   должно работать.

2. Я предполагаю, что optionActiveWindowSize имеет числовое значение c, например optionActiveWindowSize = 20, тогда вы следует изменить его как:

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

OR

     [style.width.px]="optionActiveWindowSize"

Надеюсь, это поможет!

ПРИМЕЧАНИЕ : Забыл упомянуть, как упоминал @M Fuat NUROGLU, span не имеет width prop. Итак, вы можете изменить его на div.