Angular 2 json文件链接，html显示但无数据

我已经能够链接一个外部json文件，并使用ngFor循环一些嵌套对象，因为一些html正在发布到网站上，但并没有显示任何数据。如果您一直试图将数据放入一个接口，但它仍然没有显示

这是我的模块：

import { NgModule} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import { Service } from './app.service';

import { AppComponent } from './component.app';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule
    ],
    declarations: [
    AppComponent
    ],
    bootstrap: [
        AppComponent
    ],
    providers: [
        Service
    ]
})

export class AppModule {}

这是我的组件：

import { Component, OnInit } from '@angular/core';
import { Service } from './app.service';
import { Test } from './tests';

@Component({
    selector: 'app',
    templateUrl: './assets/partials/component-app.html',
    styleUrls: ['./assets/css/component-app.css']
})

export class AppComponent implements OnInit{

    tests: any;

    constructor(private service : Service){}

    ngOnInit() {
        this.service.getData()
        .subscribe(data => {
        this.tests = data;
        })
    }
}

这是我的服务：

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

@Injectable() 
export class Service {

  constructor(private _http: Http) {}

  getData(): Observable<Test[]>{
    return this._http.get('./assets/data/data.json')
        .map(res => <Test[]>res.json().test_cases);
        .map(res => <Test[]>res.json().test_steps);
  }  
}

json：

{
"test_run_id":  "A233-CA92-3293-B9AA",
"app_name": "Chewy.com",
"time_stamp": "2018-01-20T12:00:00Z",
"test_cases": [
    {
        "test_name": "View dog bone",
        "status": true,
        "test_steps": [
            {
                "step_name": "Click Dog Category",
                "screenshot": "file1.png",
                "launch_times": [
                    100,
                    134,
                    123
                ],
                "memory": [
                    896,
                    945,
                    1023
                ],
                "cpu": [
                    1.1,
                    1.4,
                    5.7
                ]
            },
            {
                "step_name": "Click Treats",
                "screenshot": "file2.png",
                "launch_times": [
                    345,
                    441,
                    286
                ],
                "memory": [
                    1320,
                    1206,
                    1456
                ],
                "cpu": [
                    12.1,
                    13.4,
                    12.7
                ]
            },
            {
                "step_name": "Click Bone",
                "screenshot": "file3.png",
                "launch_times": [
                    342,
                    1456,
                    326
                ],
                "memory": [
                    1420,
                    1420,
                    1420
                ],
                "cpu": [
                    3.1,
                    4.4,
                    2.9
                ]
            },
            {
                "step_name": "Verify Bone is displayed",
                "screenshot": "file4.png",
                "launch_times": [
                    103,
                    124,
                    123
                ],
                "memory": [
                    1502,
                    1499,
                    1538
                ],
                "cpu": [
                    2.1,
                    3.4,
                    3.7
                ]
            }
        ]
    },
    {
        "test_name": "View cat toy",
        "status": false,
        "test_steps": [
            {
                "step_name": "Click Cat Category",
                "screenshot": "file5.png",
                "launch_times": [
                    108,
                    194,
                    163
                ],
                "memory": [
                    996,
                    945,
                    1223
                ],
                "cpu": [
                    2.2,
                    2.4,
                    2.1
                ]
            },
            {
                "step_name": "Click Toys",
                "screenshot": "file6.png",
                "launch_times": [
                    445,
                    408,
                    386
                ],
                "memory": [
                    920,
                    1132,
                    995
                ],
                "cpu": [
                    2.1,
                    3.2,
                    2.1
                ]
            }
        ]
    }
]}

HTML:

----{{item.app_name}----
时间：{{item.time\u stamp}

{{subItem.test_name}
{{subItem.status}
{{testStep.step_name}
发射时间：


{{testStep.launch_次[0]}
{{testStep.launch_times[1]}
{{testStep.launch_times[2]}

内存：


{{testStep.memory[0]}
{{testStep.memory[1]}
{{testStep.memory[2]}

中央处理器


{{testStep.cpu[0]}
{{testStep.cpu[1]}
{{testStep.cpu[2]}

经过长时间的讨论，我确信这应该是可行的：

更改getData方法，如下所示：

getData(): Observable<Test[]>{
    return this._http.get('./assets/data/data.json')
        .map(res => <Test>res.json();
  } 

getData（）：可观察{
返回此值。_http.get（'./assets/data/data.json'））
.map（res=>res.json（）；
} 

然后删除模板中的第一个ngFor：

<section *ngIf="tests" class="tested-app">
   <h2>----<span> {{ tests.app_name }} </span>----</h2>
   <p class="time"> Time: <span> {{tests.time_stamp}} </span> </p>
   <section class="flexWrap">
       <div class="module" *ngFor="let testCase of tests.test_cases">
           <h3> {{ testCase.test_name }} </h3>
           <p class="status"> {{testCase.status}} </p>
           <div class="step" *ngFor = "let testStep of testCase.test_steps">
               <h4>{{testStep.step_name}}</h4>
               <img src="../assets/images/{{testStep.screenshot}}">

----{{tests.app_name}----
时间：{{tests.time\u stamp}

{{testCase.test_name}
{{testCase.status}
{{testStep.step_name}

更新： 请查看此工作示例。控制台中没有模板更改的错误。

---

首先，您的界面不正确：测试用例和测试步骤是数组而不是对象。其次，请添加您的html文件，如果您在原始post中添加了.html，请在控制台中添加一些可能的错误消息…控制台中没有错误消息。它正在输出第一个ngFor.h2和正在显示，只是没有显示数据。HTML和数据的其余部分正在显示，我假设您的映射不正确：您调用了两次

.json（）

方法，这是不必要的。另外，为什么您需要第二个

.map

呢？测试用例已经包含了您可能需要的所有数据。请尝试删除

.map（res=>res.json（）.test_steps）；

哦，在这种情况下，你根本不需要任何

.map

操作符，使用Angular 5你甚至不需要做响应。json（）转换，只需要订阅。你的html在我看来很好。我确实需要它们，没有它们，什么都不会显示出来。这不是Angular 5。

getData(): Observable<Test[]>{
    return this._http.get('./assets/data/data.json')
        .map(res => <Test>res.json();
  } 

<section *ngIf="tests" class="tested-app">
   <h2>----<span> {{ tests.app_name }} </span>----</h2>
   <p class="time"> Time: <span> {{tests.time_stamp}} </span> </p>
   <section class="flexWrap">
       <div class="module" *ngFor="let testCase of tests.test_cases">
           <h3> {{ testCase.test_name }} </h3>
           <p class="status"> {{testCase.status}} </p>
           <div class="step" *ngFor = "let testStep of testCase.test_steps">
               <h4>{{testStep.step_name}}</h4>
               <img src="../assets/images/{{testStep.screenshot}}">