Angular 5 - невозможно распечатать остальные данные json с помощью ngFor с использованием ngOnIt

Я пытаюсь распечатать простые оставшиеся потребляемые данные json в параметрах выбора моего HTML. Я делал это много раз, но я не могу понять, что я делаю неправильно здесь. Я хочу использовать ngOnIt, потому что мне нужно загружать свои страны и штаты перед чем-либо в моем 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>

Мой компонент -

    `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 Данные, потребляемые API, отлично отображаются в XHR, а также в результатах консоли.

[
        [{
            "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"
        }]
    ]

json rest ngfor ngoninit angular5
person Abhishek Chokra    schedule 01.02.2018    source источник
comment
Что вам нужно сделать, каков ваш вопрос? Пожалуйста обновите   -  person andrea06590    schedule 01.02.2018
comment
Используя локальный самостоятельно созданный API-интерфейс для отдыха, и результат json получен из моих результатов XHR, у меня есть поле выбора, в котором я хочу отобразить свое «Имя страны» в качестве параметров для выбора страны.   -  person Abhishek Chokra    schedule 01.02.2018
comment
Я понял эту часть, но какие ошибки вы получаете? Здесь вы запрашиваете компонент. Вы должны создать службу и внедрить ее как конструктор вашего компонента, я думаю, это то, что вы пропустили.   -  person andrea06590    schedule 01.02.2018
comment
Я знаю, что не использую лучшие практики, но проблема в том, что вчера я реализовал это, но я использовал однокомпонентный одиночный html и испорченный Json, который приносил всю мою базу данных. Сегодня я упростил вещи, создал diff get ответы и получаю список городов страны в 1 ответе и еще 1 вещь, я использую многошаговый мастер, содержащий множество маршрутов и компонентов, это SPA. Но сейчас я работаю внутри своего контроллера приложений, а не в других.   -  person Abhishek Chokra    schedule 01.02.2018

Ответы (2)


arrow_upward
0
arrow_downward

Насколько я понимаю вашу проблему, вам нужно добавить асинхронный канал в ваш #ngFor

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

для отображения вашей информации на ngOnInit

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

person tomichel    schedule 01.02.2018
comment
Это не работает, так как нам не нужно использовать трубы. Примечание. Здесь я не использую промисы. - person Abhishek Chokra; 01.02.2018
comment
Но вы получаете наблюдаемое после подписки на http.get и просто для того, чтобы убедиться, что ваши параметры выбора обновлены, если ваш вызов API занимает больше времени, было бы лучше использовать его в этом случае. - person tomichel; 01.02.2018

arrow_upward
0
arrow_downward

попробуйте это, и это должно сработать

<option *ngFor="let a of loc" 
    [value]="a.CountryId" 
   ">
  {{a.CountryName}}
</option>
person haytam benizza    schedule 01.02.2018
comment
я уверен, что мы должны использовать {{a.CountryId}} вместо a.CountryId - person Abhishek Chokra; 01.02.2018
comment
Оба хороши, это не проблема, вы не можете запросить у компонента. Создайте сервис + наблюдаемый объект для возврата и подписки в вашем компоненте. - person andrea06590; 01.02.2018