Angular 8 从 GET API 调用中打印出 JSON 元素答案

【问题标题】：Angular 8 Printing out JSON elements from GET API CallAngular 8 从 GET API 调用中打印出 JSON 元素
【发布时间】：2020-10-26 23:15:12
【问题描述】：

我正在开发一个调用 API 并从 Angular 中的 GET 方法打印出 JSON 文件元素的项目。我了解如何调用 API（所有导入都在正确的位置），并且我了解如果只有一个对象，如何从对象中获取元素，但是如果有多个对象，我不知道该怎么做文件中的对象：为了测试，我将我的 URL 设置为 https://api.github.com/users

这是我在 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>

如何从这个 API 打印出每个用户的登录信息？目前没有任何打印，除非我将 URL 设置为更具体，例如 https://api.github.com/users/mojombo。

【问题讨论】：

如果你只是想打印然后使用console.log(JSON.Stringify(this.response));

标签： angular api get

【解决方案1】：

响应是一个用户数组，在您的 html 中，您仍然将其视为对象。

<p *ngFor="let user of response">
  {{ user.login }}
</p>

【讨论】：

如何同时保留 *ngIf？当我添加 *ngFor 时，我收到错误：“一个元素上不能有多个模板绑定。只使用一个以 * 为前缀的属性”
是的，你不能在元素上使用 ngIf 和 ngFor，你需要 ngContainer blog.angular-university.io/…

【解决方案2】：

如果你面对 “一个元素上不能有多个模板绑定。只使用一个以 * 为前缀的属性”然后使用ng-container

<ng-container *ngIf="loginPassed">
<p *ngFor="let item of this.response"> {{item.login}}</p>
</ng-container>

【讨论】：