Angular 2 - 未加载http调用的下拉值

Question

我的component.html将是，

<div>_{{defaultFacilityList | json}}_</div>

<div class='form-group' style="width: 100%;">
    <div class="btn-group" style="width: 100%;">
            <button type="button" class="btn btn-default" style="width : 75%;text-align: left;">{{defaultFacilityName}}</button>
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
            <ul class="dropdown-menu" style="width: 75%;">
                 <li *ngFor="let facility of defaultFacilityList" ><a class="dropdown-item" (click)="updateDefaultFacilityId(facility.facilityId , facility.facilityName)" >{{facility.facilityName}}</a>
                </li>
            </ul>
        </div>

    </div>
</div>

我的component.ts是，

import {Component, OnInit, Input, Output, OnChanges, EventEmitter, ChangeDetectionStrategy, SimpleChanges} from '@angular/core';
import { FacilityPopupService } from '../../services/facility-popup.service';


@Component({
  selector: 'default-facility-popup',
  templateUrl: './facility-popup.component.html',
  styleUrls: ['./facility-popup.component.css'],
  providers: [FacilityPopupService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FacilityPopupComponent implements OnInit{

  defaultFacilityId: string;
  defaultFacilityName : string;
  defaultFacilityList : any;
  enterpriseId : string;


  constructor(private facilityPopupService: FacilityPopupService) { }


  ngOnInit() {
    //this.defaultFacilityId = null;
    this .defaultFacilityName = "SELECT";
    this.enterpriseId = "EID1";
    this.defaultFacilityList = [{"facilityId" : "F1", "facilityName" : "FONE"}, {"facilityId" : "F2", "facilityName" : "FTWO"},{"facilityId" : "F3", "facilityName" : "FTHREE"}, {"facilityId" : "F4", "facilityName" : "FFOUR"}];
    this.getFacilityList(this.enterpriseId);
  }


   getFacilityList(enterpriseId : string) :void{
        this.facilityPopupService.getAssociatedFacilityList(enterpriseId)
          .subscribe(
              data =>   {
                            console.log("response ************ \n"+JSON.stringify(data));
                            console.log("BEFORE : "+JSON.stringify(this.defaultFacilityList));
                            this.defaultFacilityList = null;
                            console.log("AFTER : "+this.defaultFacilityList);
                            this.defaultFacilityList = data.response.facilityList;
                             console.log("LATER : "+JSON.stringify(this.defaultFacilityList));
                            this.enterpriseId = data.response.enterpriseId;
                        },
              error => console.log("Error in Component"),
              () => {
                //this.manageResult()
                console.log("Service call completed");
                console.log("this.defaultFacilityList : "+JSON.stringify(this.defaultFacilityList));
                console.log("this.enterpriseId : "+this.enterpriseId);
                //this.defaultFacilityList = [{"facilityId" : "F1", "facilityName" : "FONE"}, {"facilityId" : "F2", "facilityName" : "FTWO"}];
                document.getElementById("facilityIdModalButton").click();
              }
          );
   }


   updateDefaultFacilityId(facilityId : string, facilityName : string) : void {
        console.log("*********** defaultFacilityId : "+facilityId +"\n********* defaultFacilityName : "+facilityName);
        this.defaultFacilityId = facilityId;
        this.defaultFacilityName = facilityName;
   }

}

我的控制台显示没有任何错误。它将是，

response ************ 
{"request":{"url":"/getFacilityList"},"response":{"enterpriseId":"EID1","facilityList":[{"facilityId":"F1","facilityName":"FONE"},{"facilityId":"F2","facilityName":"FTWO"}]},"error":""}
BEFORE : undefined
AFTER : null
LATER : [{"facilityId":"F1","facilityName":"FONE"},{"facilityId":"F2","facilityName":"FTWO"}]
Service call completed
this.defaultFacilityList : [{"facilityId":"F1","facilityName":"FONE"},{"facilityId":"F2","facilityName":"FTWO"}]
this.enterpriseId : EID1

没有错误。此外，下载值也未加载。

首次加载默认值n

然后在下拉列表中选择任何值后，它就像

一样得到解决

请帮我解决这个问题。

注意：

1. 我怀疑存在一些渲染问题。

2. 也可能会发生这种情况，因为来自 http 电话的延迟回复。