无法使用 Angular 6 打印嵌套的 JSON 数据

Question

我正在学习编码，但在使用 Angular 6 时遇到了这个问题，我似乎无法解决。我之前能够获取 JSON 的数据，但现在它是嵌套的，我不知道如何获取它的数据。这就是我到目前为止所做的事情

服务

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class TestService {
    url = "http://localhost:80/assets/data/test.json";
    constructor(private http:Http) { }

    getTestWithObservable(): Observable<any> {
        return this.http.get(this.url)
            .map(this.extractData)
            .catch(this.handleErrorObservable);
    }

    private extractData(res: Response) {
        let body = res.json();
        return body;
    }

    private handleErrorObservable (error: Response | any) {
        console.error(error.message || error);
        return Observable.throw(error.message || error);
    }
}

组件

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { TestService } from './test.service';

@Component({
    selector: 'ngx-test',
    styleUrls: ['./test.component.scss'],
    templateUrl: './test.component.html',
})

export class TestComponent implements OnInit {
    observableTest: Observable<any>
    errorMessage: String;

    constructor(private testService: TestService) { }

    ngOnInit(): void {
        this.testService.getTestWithObservable().subscribe(
            res => {
                let user = res[0]["users"];
                let user_data = user["data"];
                console.log(user_data["name"]);
            }
        );
    }
}

JSON

[{
    "id": 1,
    "users": {
        "user_id": 14,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}]

HTML

<div *ngFor="let x of user_data; let i = index">
    {{x.name}}
</div>

如果有人能指出解决方案或我做错了什么，我将不胜感激。

Answer 1

您需要将数据保存在实例属性中才能访问它。 user_data 是你的函数本地的，你不能在模板中访问它，所以你应该使用这样的东西：

export class TestComponent implements OnInit {
    observableTest: Observable<any>
    errorMessage: String;
    user_data: any;

    constructor(private testService: TestService) { }

    ngOnInit(): void {
        this.testService.getTestWithObservable().subscribe(
            res => {
                let user = res[0]['users'];
                let user_data = user['data'];
                console.log(user_data['name']);
                this.user_data = user_data; // here
            }
        );
    }
}

Answer 2

您的代码存在一些问题：

export class TestComponent implements OnInit {
  observableTest: Observable<any>
  errorMessage: String;

  user_data: any;

  constructor(private testService: TestService) {
  }

  ngOnInit(): void {
    this.testService.getTestWithObservable().subscribe(
      res => {
        let user = res[0]["users"];
        this.user_data = user["data"];
        console.log(user_data["name"]);
      }
    );
  }
}

在 Angular >= 4 中，管道方法更好地处理 Observable

this.http.get(this.url)
  .pipe(
    filter(...),
    map(...)
  )

使用 HttpClient（不推荐使用 Http），.json() 为您完成。您不需要您的 extractData 函数。

• 您必须初始化变量。并用“this”来指代它。