Angular 5 - unable to print rest json data by ngFor using ngOnIt

Question

I am trying to print the simple rest consumed json data in my HTML's select's options. I've done it many times but i can't figure out what i am doing wrong here. I want to use the ngOnIt beccause i have to load my countries and states before anything on my HTML

HTML -

<b>
<div class="form-group">
<label for="country" class="cols-sm-2 control-label">Country</label>
  <div class="cols-sm-10">
   <div class="input-group" *ngIf="loc">
     <span class="input-group-addon"><i class="fa fa-globe fa" aria-hidden="true"></i></span>
     <select class="form-control" name="1" id="1" style="color:#000;">
       <option value=""selected>Select Country</option>
       <option *ngFor="let a of loc" value="{{a.CountryId}}">{{a.CountryName}}</option>
     </select>
 </div>
  </div>
</div>
</b>

My Component -

    `import { Component, OnInit, Input, Pipe, NgModule } from '@angular/core';
      import { resetFakeAsyncZone } from '@angular/core/testing';
      import{HttpClient, HttpParams, HttpHeaders} from'@angular/common/http';
      import { Http } from '@angular/http/src/http';
       import { Observable } from 'rxjs/Observable';
       import 'rxjs/add/operator/map';
      import 'rxjs/add/observable/forkjoin';
     import { forkJoin } from 'rxjs/observable/forkJoin';
     import { ReactiveFormsModule,FormsModule,FormGroup,FormControl,Validators,FormBuilder } from '@angular/forms';

     export class AppComponent implements OnInit {
      loc : any;
      constructor( private http:HttpClient) {}
        ngOnInit(){
        this.http.get('http://localhost:50749/api/TravelDetails/Get/Locations?type=json')
       .subscribe((json)=>{this.loc = json; console.log(this.loc);});
  };`

json Data consumed by api, perfectly showing in XHR as well as console results-

[
        [{
            "States": [{
                "StateId": 1,
                "Country_Id": 1,
                "StateName": "Alabama"
            }, {
                "StateId": 50,
                "Country_Id": 1,
                "StateName": "Wyoming"
            }],
            "CountryId": 1,
            "CountryName": "United States of America",
            "CountryCode": "USA"
        }, {
            "States": [{
                "StateId": 51,
                "Country_Id": 2,
                "StateName": "Alberta"
            }, {
                "StateId": 63,
                "Country_Id": 2,
                "StateName": "Yukon"
            }],
            "CountryId": 2,
            "CountryName": "Canada",
            "CountryCode": "CA"
        }]
    ]

Answer 1

As far as I understand your problem you need the add the async pipe to your #ngFor

<option *ngFor="let a of loc | async" value="{{a.CountryId}}">{{a.CountryName}}</option>

in order to display your information on ngOnInit

https://angular.io/api/common/AsyncPipe

Answer 2

try this and it should work

<option *ngFor="let a of loc" 
    [value]="a.CountryId" 
   ">
  {{a.CountryName}}
</option>