Question

我已经能够链接外部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);
  }  
}

数据界面：

export class Test {
     test_run_id: string;
     app_name: string;
     time_stamp: string;
     test_cases:  {
        test_name: string,
        status: string,
        test_steps: {
            step_name: string,
            screenshot: blob,
            launch_times: array,
            memory: array,
            cpu: array
        }
    }
}

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：

<section class="tested-app" *ngFor = "let item of tests">
<h2>----<span> {{ item.app_name }} </span>----</h2>
<p class="time"> Time: <span> {{item.time_stamp}} </span> </p>
<section class="flexWrap">
    <div class="module" *ngFor="let subItem of item.test_cases">
        <h3> {{ subItem.test_name }} </h3>
        <p class="status"> {{subItem.status}} </p>
        <div class="step" *ngFor = "let testStep of subItem.test_steps">
            <h4>{{testStep.step_name}}</h4>
            <img src="../assets/images/{{testStep.screenshot}}">
            <div class="results">
                <p>Launch Times:</p>
                <ul>
                    <li>{{testStep.launch_times[0]}}</li>
                    <li>{{testStep.launch_times[1]}}</li>
                    <li>{{testStep.launch_times[2]}}</li>
                </ul>
                <p>Memory:</p>
                <ul>
                    <li>{{testStep.memory[0]}}</li>
                    <li>{{testStep.memory[1]}}</li>
                    <li>{{testStep.memory[2]}}</li>
                </ul>
                <p>CPU</p>
                <ul>
                    <li>{{testStep.cpu[0]}}</li>
                    <li>{{testStep.cpu[1]}}</li>
                    <li>{{testStep.cpu[2]}}</li>
                </ul>
            </div>
        </div>
    </div>
</section></section>

Answer 1

经过长时间的讨论，我确信这应该有效：

更改你的getData方法，如下所示：

getData(): Observable<Test[]>{
    return this._http.get('./assets/data/data.json')
        .map(res => <Test>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}}">

<强>更新请看一下这个工作样本。控制台中没有错误，模板中有更改。 https://stackblitz.com/edit/angular-duzb7z

Angular 2 json文件链接和html显示但没有数据

1 个答案: