了解 Angular 中的变更检测和异步函数

Question

我正在尝试了解 Angular 中的更改检测和模板更新。我其实有点迷茫。

我有一个按钮和一个简单的输入字段。 单击按钮时，我将输入字段的值更改为“测试”。然后创建一个立即返回的异步函数。然后我使用 for 循环等待大约 4 秒（用于测试目的）。

• 我的期望是：输入字段的值立即变为“异步”，因为它是一个异步调用。
• 现实：输入字段的值在 4 秒后变为“异步”。

代码

  updateField(){
    this.textContentMain.title = "test"
    this.asyncTestFunction();
    for(var i=0;i<3999999999;i++){

    } 
  }

  asyncTestFunction() {
    this._contentSalesTextConfigService.get(this.contentSalesTextConfig).subscribe(item => {
        this.textContentMain.title = "asynced";
    })
  }

模板

<button (click)="updateField()">Update</button>
<input  [ngModel]="textContentMain.title" #titleAccessor="ngModel" name="title" id="title"  type="text" >

Answer 1

这是执行的流程，这应该可以解决您所有的疑问

// 1. This function will be called as soon as clicked
updateField(){
    this.textContentMain.title = "test" // 2. changes the value
    this.asyncTestFunction(); // 3. call async function
    for(var i=0;i<3999999999;i++){ // 5. start for loop 

    } 
    // 6. end for loop
}

asyncTestFunction() {
    this._contentSalesTextConfigService.get(this.contentSalesTextConfig) // 4. call the http request
    .subscribe(item => {
        this.textContentMain.title = "asynced"; // 7. asap response is received and for loop finish its execution this wiil be executed.
    })
}

Why => 7. asap 收到响应，for 循环完成执行 这将被执行。 （为什么要等待“for循环”完成）？

为此，您必须阅读事件循环
看这个最好的视频 可以解释幕后的关键：

What the heck is the event loop anyway?