从 Angular 5 中的嵌套 0 索引 Json 数据访问和绑定数据

Question

我正在尝试使用 angular 在我的 html 中显示来自 API 的 json 结果的数据 5. 我无法做到我猜是因为我的 json 中不必要的 0 索引，请帮助。我的 json 看起来像 -

{
    "Plans": [
        [{
            "PlanId": 1,
            "PlanName": "Free"
        }, {
            "PlanId": 2,
            "PlanName": "Regular"
        }, {
            "PlanId": 3,
            "PlanName": "Premium"
        }]
    ],
    "Location": [
        [{
            "States": [{
                "StateId": 1,
                "Country_Id": 1,
                "StateName": "Alabama"
            }, {
                "StateId": 2,
                "Country_Id": 1,
                "StateName": "Alaska"
            }, {
                "StateId": 3,
                "Country_Id": 1,
                "StateName": "Arizona"
            }, {
                "StateId": 34,
                "Country_Id": 1,
                "StateName": "North Dakota"
            }, {
                "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": 52,
                "Country_Id": 2,
                "StateName": "British Columbia"
            }, {
                "StateId": 53,
                "Country_Id": 2,
                "StateName": "Manitoba"
            }, {
                "StateId": 54,
                "Country_Id": 2,
                "StateName": "New Brunswick"
            }, {
                "StateId": 63,
                "Country_Id": 2,
                "StateName": "Yukon"
            }],
            "CountryId": 2,
            "CountryName": "Canada",
            "CountryCode": "CA"
        }]
    ]
}

Image for 0 indexes I am talking about

我正在尝试动态生成计划名称，即免费、常规，

<b>
<div class="col-md-4 text-center"*ngFor="let dummy of Plans" >
   <div class="panel panel-pricing" >
       <div class="panel-heading" >
           <h3>{{dummy.PlanName}}</h3>
       </div>
       <div class="panel-body text-center">
           <p><strong>0 / Month</strong></p>
       </div>
       <div class="panel-footer">
           <div class="radio">
               <label><input type="radio" name="planradiogroup" id="planradio{{dummy.PlanId}}" [checked]="idx === 0" [value]="dummy.id" (change)="onSelectionChange(dummy)">Option {{dummy.PlanId}}</label>
           </div>
      </div>
   </div>
</div>
</b>

我的组件 -

`

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent implements OnInit {

   readonly apiTravelPlans = "http://localhost:50749/api/TravelGetDetails?type=json";
   plans: any = typeof {};

   constructor (private http:HttpClient){
      this.ngOnInit().subscribe(data=>{
        console.log(data);
       this.plans = data;
      });
    }
   posts: Observable<any>;

   getPosts() {
    this.posts = this.http.get(this.apiTravelPlans) //not used
   }

  ngOnInit(){
    return this.posts = this.http.get(this.apiTravelPlans) // using to load json before my html
  };
}

`

Answer 1

缩进 JSON 后，结构变得更容易理解。

Plans是一个包含单个元素的数组，也是一个数组。

所以，如果你真的无法修复这个结构，你需要

*ngFor="let dummy of Plans[0]"

编辑：

既然您已经发布了您的代码，许多其他错误就变得显而易见了。

您正在尝试使用模板中的 Plans，但您的组件没有任何名为 Plans 的属性。您有一个名为 plans 的名称，由于不明原因，它被初始化为 typeof {}（为什么？）。

您从构造函数调用 this.ngOnInit()。同样，这没有任何意义。 ngOnInit 是您的组件的一个钩子，由 angular 自动调用 。您必须 而不是 调用它。它的 return 类型应该是 void。

变量plans被异步初始化。因此，在尝试访问它之前，您必须测试它是否已定义（或者如果您将其初始化为空对象，则它的字段是否已定义）。否则，您将在尝试访问稍后将异步初始化的对象的字段时出错。

并且 plans 不是您 JSON 的字段 Plans。这是封闭的对象。

所以，简而言之，您的组件应该如下所示：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent implements OnInit {

 obj: any; // you should define an interface instead of using any, and choose a good name torefer to the json object

 constructor(private http: HttpClient) { }

 ngOnInit() {
    this.http.get('http://localhost:50749/api/TravelGetDetails?type=json')
      .subscribe(json => this.obj = json);
  };
}

视图应如下所示：

<div *ngIf="obj">
  <div class="col-md-4 text-center"*ngFor="let dummy of obj.Plans[0]">
    ...
  </div>
</div>

Answer 2

如果这对任何人有帮助：

console.log(this.selectedRequest['interviewDetails']['interviewDate1']);

所以 interviewDate1 是 interviewDetails 的属性，它是 selectedRequest 上的 property/object。

从 Angular 5 中的嵌套 0 索引 Json 数据访问和绑定数据

Access and bind data from nested 0 index Json data in Angular 5

json

ngfor

angular5