Угловой, обновить вид длинных расчетов

Question

Я столкнулся с проблемой, пытаясь реализовать спиннер с Angular 4.

У меня есть сложное приложение, которое выполняет сложные и длинные вычисления.Перед запуском расчетов я хочу отобразить счетчик.Чтобы сделать это:

1. Я установил переменную в "true", чтобы показать счетчик
2. Я делаю сложные вычисления
3. Я установил переменную в«false», чтобы скрыть счетчик

Проблема в том, что счетчик не будет отображаться.

В следующем примере я подделал сложный метод для облегчения понимания.

https://stackblitz.com/edit/angular-eqo9cl

Может кто-нибудь понять, как решить эту проблему?

Кажется, что представление не может обновиться перед запуском вычислений.Мы также можем видеть, что переменная "val" не обновляется в представлении, пока не будут выполнены вычисления.

Спасибо за чтение:)

Answer 1

Чтобы предоставить браузеру возможность обновлять представление до начала вычислений, вы можете запускать их асинхронно с помощью setTimeout.Смотрите этот стек для демонстрации.

doWork() {
  this.spinner = true;
  setTimeout(() => {
    this.performCalculations();
    this.spinner = false;
  }, 50);
}