Databind in angular 5 with WCF service

See more:

HTML5

Typescript

Angular5

, +

I have problem while binding angular dropdown

When I click(GetPlanDates()) dropdown It has to load values from service, and able to select the value (GetPlanDate($event))


Wcf response for angular result:

result({"Response":"Success!","dates":["20180723","20180724","20180725","20180726"]} )

What I have tried:

<div class="form-group">
              <label class="control-label col-sm-3" for="PlanDate">Plan Date :</label>
              <div class="col-lg-3">
                <select class="form-control" [(ngModel)]="model.PlanDateS" name="PlanDates" #name="ngModel" required (change)="GetPlanDate($event)"
                  (click)="GetPlanDates()">
                  <option [ngValue]="terri" *ngFor="let terri of PlanDates" >{{terri.PlanDates}}</option>
                </select>
              </div>
            </div>

TS code:

PlanDates:any[];
  public GetPlanDates() {
    this._EnvironmentService.LoadTerritoryDatesforBuilding(this.model, this.Server, this.BldgMnemonic).subscribe(result => {
      this.response = result;
      if (this.response.Response.match("Success!")) {
        this.PlanDates=this.response.dates;
      }
      else {
        this.isTerritoryDates = true;
      }
    }, err => console.error(err => {
      console.log('Error While Getting PlanDates');    }));
  }