Question

我正在从事Angular 6项目。在我的项目中，我正在通过httpClient发出请求，通过该请求我获取json数据，但我不知道如何遍历此数据。如果有人知道解决方案，请提供帮助。

我的Json数据如下：

错误详细信息：

app.component.js

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'servicedemo';
  private url = "http://localhost/api.php";
  public apps: Applications[];

constructor(http: HttpClient) {
    http.get(this.url).subscribe(result => {
        this.apps = result as Applications[];
        console.log(this.apps);
    }, error => console.error(error));
}}

interface Applications {
    id: number;
    name: string
    age: number 
}

app.componenet.html

<div *ngFor="let item of apps">
    {{ item.name }}
 </div>

Answer 1

首先在其上使用Object.keys将对象转换为数组：

    http.get(this.url).subscribe(result => {
        const arr: Applications[] = Object.keys(result);
        this.apps = arr;
        console.log(data);
    }, error => console.error(error));

您还应该订阅onInit

如何在Angular 6中迭代json数据？

1 个答案: