Angular2 - 变量不会更新

Question

我有一个函数getCallList（）来检索调用列表历史记录。 listEmpty是一个最初设置为false的变量，表示调用列表不为null。当调用getCallList时，我认为模板是在listEmpty变量更新之前呈现的。

public getcallList() {
    let api = ApiBuilder.getInstance();
    this.callDataUrl = api.getcallReportRulesGenericURL();
    let that = this;
    return this.http
      .get(this.callDataUrl, {})
      .map(response => {
        let callDataList = new Array<callRealsData>();
        let res = response.json();
        let reponseStatus = response.status;
        if (reponseStatus === this.RET_SUCCESS) {
          let reportRules = res.data.report_rules;
          if (reportRules.length == 0) {
            that.listEmpty = true;
          }
          for (let i = 0; i < reportRules.length; i++) {
            let callData = new callRealsData();
            callData.id = reportRules[i].id;
            callData.name = reportRules[i].name;
            callData.startTime = reportRules[i].start_time;
            callData.endTime = reportRules[i].end_time;
            callData.type = reportRules[i].type;
            callDataList.push(callData);
          }
        } else {
          console.log(this.className + ': API response failed');
        }
        return callDataList;
      });
  }

最初，listEmpty变量被赋值为false。 在HTML部分，有* ngIf有条件地在代码中添加一个主体。

<div *ngIf="callList.listEmpty">
        <p class="noItem">Call list empty</p>
    </div>
    <div *ngIf="!callList.listEmpty" class="content">
            <div class="spinner">
                <mdl-spinner *ngIf="!dataLoaded" class="progress contentZIndex" [active]="true"></mdl-spinner>
            </div>
            <div *ngFor="let item of callService.storesHavingCallList">
                <div>
                    <data-store [store]="item"></data-store>
                </div>
            </div>
        </div>

当listEmpty预期为true时，spinner会显示几秒然后消失。一旦消失，就会显示“Call list empty”消息。是否有可能删除变量更新前出现的微调器。可以一个人给我一些见解。