每次while循环迭代后刷新Angular绑定

Question

我想在while循环的每次迭代后刷新html绑定。目前只有按钮完成后才刷新数据。

以下是我目前使用setTimeout的示例。

https://plnkr.co/edit/6nfnJrr2UwHW8jm2dnhr?p=preview

CODE：

//our root app component
import { Component, NgModule, VERSION } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

@Component({
    selector: 'my-app',
    template: `
    <div>
      <h2>{{num}}</h2>
      <button (click)="updateNumber()">Update number</button><br>
      <button (click)="updateNumberWithST()">Update number (Works)</button><br>
      <button (click)="num = 0">restart</button>
    </div>
  `,
})
export class App {
    num: number;
    constructor() {
        this.num = 0;
    }

    //I want something like this working like updateNumberWithST()
    updateNumber() {
        while (this.num < 50) {
            for (let i = 0; i < 30000000; i++) {
              //It represent a process that take some time...
            }
            this.num += 1;
        }
    }

    updateNumberWithST() {
        setTimeout(() => {
            if (this.num < 50) {
                this.num += 1;
                this.updateNumberWithST()
            }
        }, 50);
    }
}

@NgModule({
    imports: [BrowserModule],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule { }

感谢您的帮助。