Angular 8从GET API调用打印出JSON元素
Angular 8从GET API调用打印出JSON元素
提问于 2020-07-07 02:55:30
我正在做一个项目，它调用一个API并从Angular中的GET方法打印出JSON文件的元素。我知道如何调用API (所有导入都在正确的位置)，也知道如果只有一个对象，如何从对象获取元素，但是如果文件中有多个对象，我就不知道该怎么做了:为了进行测试，我将URL设置为https://api.github.com/users。
下面是我的typescript类，其中包含我在HTML文件中调用的方法：
export class LoginComponent implements OnInit {
url = 'https://api.github.com/users';
response: any;
constructor(private http: HttpClient) {
}
ngOnInit(): void{
}
onCreateData(){
this.loginPassed = true;
this.http.get(this.url).subscribe((response) => {
this.response = response;
console.log(this.response);
});
}
}这是我的HTML文件：
<button
class="btn btn-primary"
(click)="onCreateData()">Submit</button>
<p *ngIf="loginPassed">Data from API: {{ response?.login }}</p>如何通过此接口打印出每个用户的登录信息？目前，除非我将URL设置为更具体，如https://api.github.com/users/mojombo，否则不会打印任何内容。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-07 03:08:10
响应是一个用户数组，在您的html中，您仍然将其视为一个对象。
<p *ngFor="let user of response">
{{ user.login }}
</p>Stack Overflow用户
发布于 2020-07-07 03:23:55
如果你面对的是“不能在一个元素上有多个模板绑定。只使用一个以*为前缀的属性”，那么使用ng-container
<ng-container *ngIf="loginPassed">
<p *ngFor="let item of this.response"> {{item.login}}</p>
</ng-container>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62762687
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号