ngIf - выражение изменилось после проверки

У меня простой сценарий, но я не могу заставить его работать!

На мой взгляд, я отображаю текст в поле с ограниченной высотой.

Текст извлекается с сервера, поэтому представление обновляется при поступлении текста.

Теперь у меня есть кнопка " ngIf ", которая имеет ngIf который должен показывать кнопку, если текст в поле переполнен.

Проблема заключается в том, что, поскольку текст изменяется при получении, состояние кнопки "развернуть" становится true после завершения обнаружения изменения углов...

Таким образом, я получаю эту ошибку: выражение изменилось после того, как оно было проверено. Предыдущее значение: "ложь". Текущее значение: "true".

Очевидно кнопка не показывает...

увидеть этот Plunker (проверьте консоль, чтобы увидеть ошибку...)

Есть идеи, как заставить это работать?

Ответ 1

эта ошибка возникает из-за того, что вы в dev mode:

В dev mode обнаружения изменения dev mode добавляет дополнительный поворот после каждого регулярного запуска обнаружения изменений, чтобы проверить, изменилась ли модель.

поэтому, чтобы заставить обнаружение изменений запустить следующий тик, мы могли бы сделать что-то вроде этого:

export class App implements AfterViewChecked {

  show = false; // add one more property

  constructor(private cdRef : ChangeDetectorRef) { // add ChangeDetectorRef
    //...
  }
  //...
  ngAfterViewChecked() {
    let show = this.isShowExpand();
    if (show != this.show) { // check if it change, tell CD update view
      this.show = show;
      this.cdRef.detectChanges();
    }
  }

  isShowExpand()
  {
    //...
  }
}

Демо-версия: https://plnkr.co/edit/UDMNhnGt3Slg8g5yeSNO?p=preview

Ответ 2

По какой-то причине ответ @Tiep Phan не сработал для меня, чтобы вызвать обнаружение изменений, но с помощью setTimeout (который также вызывает обнаружение изменений) сработал.

Мне также нужно было только добавить его в строку с ошибкой, и она отлично работала с кодом, который у меня уже был в ngOnInit, вместо того, чтобы добавлять ngAfterViewInit.

Пример:

ngOnInit() {
    setTimeout(() => this.loadingService.loading = true);
    asyncFunctionCall().then(res => {
        this.loadingService.loading = false;
    })
}

Более подробная информация здесь: https://github.com/angular/angular/issues/6005