Не удается распечатать вложенные данные JSON с помощью Angular 6

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

Есть некоторые проблемы с вашим кодом:

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.

• Вы должны инициализировать вашу переменную. И используйте «это», чтобы обратиться к нему.

Answer 2

Вам необходимо сохранить данные в свойстве экземпляра для доступа к ним. 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
            }
        );
    }
}