现在,当我必须使用在线JSON文件时,我正在开发一个Angular2项目.我使用了http.get但我得到了所有文件,我只想要第二列和第三列,first_name和last_name.
这是JSON文件> http://alexgr.ro/ehealth/patients.json
这是我的代码
admin1.component.ts我要显示日期
import { Component } from '@angular/core';
import { UserService } from '../services/user.service';
@Component({
moduleId: module.id,
selector: 'admin1',
templateUrl: `admin1.component.html`,
})
export class Admin1Component {
enable: boolean;
_profile: {}
constructor(private userService: UserService) {
this.enable = false;
}
loadUser() {
this.userService.getUser().subscribe(data => this._profile = data);
this.enable = true;
}
}
我的user.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class UserService {
constructor (private http: Http) {}
getUser() {
return this.http.get('http://alexgr.ro/ehealth/patients.json')
.map((res:Response) => res.json());
}
}
和我的admin1.component.html
<div>
<button (click)="loadUser()">Load User</button>
<div *ngIf="enable">
{{ _profile | json }}
</div>
任何帮助都是极好的
解决方法:
您需要使用ngFor循环遍历项目,
<div>
<button (click)="loadUser()">Load User</button>
<div *ngIf="enable">
<ul>
<li *ngFor="let pro of _profile ">
<h1> {{ pro.first_name}} </h1>
<h1> {{ pro.last_name}} </h1>
</li>
</ul>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。