0

我正在尝试在我的 HTML 选择选项中打印简单的剩余消耗的 json 数据。我已经做过很多次了，但我不知道我在这里做错了什么。我想使用 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"
        }]
    ]
4

2 回答 2

0

试试这个，它应该工作

<option *ngFor="let a of loc" 
    [value]="a.CountryId" 
   ">
  {{a.CountryName}}
</option>
于 2018-02-01T13:02:24.773 回答
0

据我了解您的问题，您需要将异步管道添加到您的#ngFor

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

为了在 ngOnInit 上显示您的信息

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

于 2018-02-01T13:01:49.200 回答