Javascript Angular4：从Json加载数据

我是个新手。我所做的是在单击时从json文件加载数据，到目前为止，我已经正确地完成了这项工作

但im卡住的地方是在单击之前加载第一个json对象，即在页面加载时加载第一个对象

Typescript

export class RequestComponent{
  people: Object[];
  constructor(http:Http){
    http.get('data.json').subscribe(res => {
      this.people = res.json();
    });
  }

  public currentStatus;
  public setThis = (people) => this.currentStatus = people;
}

Html

  <ul class="col-md-4">
    <li *ngFor="let person of people" (click)="setThis(person)">
      <span><i class="fa fa-cog" aria-hidden="true"></i></span>
      <p>{{ person.name }}</p>
    </li>
  </ul>
   <div *ngIf="currentStatus" class="col-md-8 right-section">
      <h2>{{ currentStatus.name }}</h2>
      <img [src]="currentStatus.img" class="img-responsive"/>
   </div>

{{person.name}



{{currentStatus.name}

试试这个：

constructor(private http:Http){
    this.http.get('data.json').subscribe(res => {
        this.people = res.json();
    });
}

ngAfterViewInit(){        
    this.setThis(this.people[0]);
}

---

页面的加载速度通常比从API中获得响应的速度快，因此，在获得响应后，您应该在订阅中设置人员，以便确定它已收到响应

constructor(private http:Http){
    this.http.get('data.json').subscribe(res => {
        this.people = res.json();
        if(this.people && this.people.length>0)
            this.setThis(this.people[0]);
    });
}

根据您的实现，执行if可能更合适，以确保人员数组在setThis中不为空

---

或者，您可以将html更改为这样

<ul class="col-md-4">
    <li *ngFor="let person of people" (click)="setThis(person)">
        <span><i class="fa fa-cog" aria-hidden="true"></i></span>
        <p>{{ person.name }}</p>
    </li>
</ul>
<div *ngIf="currentStatus>-1" class="col-md-8 right-section">
    <h2>{{ people[currentStatus]?.name }}</h2>
    <img [src]="people[currentStatus]?.img" class="img-responsive"/>
</div>

{{person.name}



{{人[当前状态]？.name}

将currentStatus更改为数字，并将其默认为0。这将允许您避免将currentStatus分配给第一个人的问题，只要有一个人被html更新。如果需要禁用currentStatus部件的显示，只需将其设置为-1即可

---

那个？在.name和.img告诉html在尝试访问该名称或img之前验证该对象是否存在之前，如果该对象不存在，则不会显示该部分。

尝试在ngOnInit（）函数中加载json

import { Component, OnInit } from '@angular/core';
// other imports

export class RequestComponent implements ngOnInit{
  people: Object[];

  constructor(private http:Http){}

  ngOnInit(){
      this.http.get('data.json').subscribe(res => {
      this.people = res.json();
    });
  }
}

并添加ngIf以显示您的记录，这样它就不会在加载

人员之前尝试显示它

<ul *ngIf="people" class="col-md-4">
    <li *ngFor="let person of people" (click)="setThis(person)">
        <span><i class="fa fa-cog" aria-hidden="true"></i></span>
        <p>{{ person.name }}</p>
    </li>
</ul>
<div *ngIf="currentStatus" class="col-md-8 right-section">
    <h2>{{ currentStatus.name }}</h2>
    <img [src]="currentStatus.img" class="img-responsive" />
</div>



{{person.name}



{{currentStatus.name}
@dev254然后将其移动到AfterViewInit。如果仍然无法工作，请告诉我错误。
Error:Uncaught（承诺中）：TypeError:cannotreadproperty“0”of undefined
this.people未定义。请检查您的数据。确保检索正确。很高兴为您服务！