typescript Angular4：从 Json 加载数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43688895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular4: Load data from Json
提问by dev254
I'm a newbie in Angular. What i'm doing is loading data from json file on click, which so far i have done correctly.
我是 Angular 的新手。我正在做的是在单击时从 json 文件加载数据，到目前为止我已经正确完成了。
But the point where im stuck is to load the first json object before click, i.e to load the first object when the page loads
但是我卡住的点是在点击之前加载第一个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
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>
回答by LLL
Try loading json in ngOnInit() function.
尝试在 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();
});
}
}
And adding ngIf for displaying your records, so it doesn't try to display it before peopleare loaded.
并添加 ngIf 来显示您的记录，因此它不会在people加载之前尝试显示它。
<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>
回答by Joo Beck
Your page will usually load faster than it can get a response form your API, as such you should be setting people inside of the subscribe, after you get the response, so you can be certain it has received it.
您的页面通常会比从您的 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]);
});
}
Depending on your implementation, it may be more appropriate to do the if to ensure that the people array isn't empty inside of setThis.
根据您的实现，执行 if 以确保 setThis 中的 people 数组不为空可能更合适。
Alternatively, you could change your html to be like so
或者，您可以将 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>
Change currentStatus to a number and default it to 0. This would allow you to circumvent the problem of assigning currentStatus to the first person, as soon as there was a person the html would update. If you ever needed to disable the display of the currentStatus part, just set it to -1.
将 currentStatus 更改为一个数字并将其默认为 0。这将允许您规避将 currentStatus 分配给第一个人的问题，只要有人，html 就会更新。如果您需要禁用 currentStatus 部分的显示，只需将其设置为 -1。
The ? before the .name and .img tells the html to verify the object exists before trying to access the name or img, if it doesn't exist it doesn't show that part.
这 ？在 .name 和 .img 之前告诉 html 在尝试访问名称或 img 之前验证对象是否存在，如果它不存在，则不会显示该部分。
回答by wannadream
Try this:
试试这个：
constructor(private http:Http){
this.http.get('data.json').subscribe(res => {
this.people = res.json();
});
}
ngAfterViewInit(){
this.setThis(this.people[0]);
}
