Question

我正在尝试将json文件加载到我的Angular应用程序中，但无法找到罪魁祸首。它一直告诉我它无法解析我的组件的所有参数。

（直接从组件加载数据，因此它与我最近添加的用于从json文件加载数据的代码有关）

我的模块：

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 { AppComponent } from './component.app';

@Injectable() 
export class Service {

  constructor(private _http: Http) {}

  getData(){
    return this.http.get('./assets/data/data.json')
      .map(res => res.json())
  }
}


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

export class AppModule {}

我的组件：

import { Component } from '@angular/core';

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

export class AppComponent {

    tests: any;

    constructor(private service : Service){}

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

错误：

(index):18 Error: Error: Can't resolve all parameters for AppComponent: (?).
        at CompileMetadataResolver.getDependenciesMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14404:21)
        at CompileMetadataResolver.getTypeMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14301:28)
        at CompileMetadataResolver.getDirectiveMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14074:30)
        at eval (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14167:51)
        at Array.forEach (<anonymous>)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:14161:51)
        at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:16803:49)
        at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:16741:39)
        at RuntimeCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:16732:23)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:6954:29)

data.json，我需要遍历test_cases和Test_steps：

{
"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
                ],

HTML：

<section class="tested-app" *ngFor = "let item of tests">
    <h2>----<span> {{ item.app_name }} </span>----</h2>
    <p id="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}}">

Answer 1

就像第一行：

import { Component } from '@angular/core';，

你需要添加一行

import { Service } from X

其中X是定义Service的文件的路径。我想你在app.module中定义了服务，所以试试

import { Service } from ./app.module.ts

（如果app.module.ts在同一目录中，否则包含该目录的路径）

Answer 2

您需要在app.component.ts

中导入您的服务

import { Service} from '...';

你还需要实现OnInit

export class AppComponent implements OnInit

在getData函数中，您有拼写错误：

return this._http.get('./assets/data/data.json')

最重要的是，您需要将服务从app.module.ts中删除？为什么？因为它会创建循环依赖： app.module.ts - ＆gt; app.component.ts - ＆gt; app.module.ts

创建一个新的service.ts

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(){
    return this._http.get('./assets/data/data.json')
      .map(res => res.json());
  }
}

在app.module中导入

import { Service } from './service';

Angular2不会加载json文件。错误：无法解析AppComponent的所有参数

2 个答案: