Question

我有一个json文件，我试图将这些数据放入Angular 2的服务中。

我的代码是：

我的todo.service.ts：

    import { Injectable } from '@angular/core';
    import {Http, Response} from '@angular/http';   
@Injectable()
 export class TodoService {
   constructor(public http: Http) {}
   todos = [];
   getTodoData() {
     console.log('so bad');    
     this.http.get('./data.json').subscribe(res => {
        this.todos.push(...res.json());
      });
     return this.todos;
  }
}

我的app.component.ts是：

import { Component } from '@angular/core';
import {TodoService} from './todo.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
myjsondata: any;
title = 'app';
todos= [];
constructor(private todoService: TodoService) {
  this.todos = todoService.getTodoData();
}
}

我的data.json：

{
    "todos": [{
            "id": 1,
            "content": "order the room",
            "isDone": false
        },
        {}
    ]
}

我的app.component.html：

<div>
    <h1>Todos List : </h1>
    <insert></insert>
    <div>
        <p *ngFor="let item of todos">{{item.content}}</p>
    </div>
</div>

我收到错误：＆＃34; zone.js：2933获取http://localhost:4200/data.json 404（未找到）＆＃34;

Answer 1

加载json文件

您正在尝试加载json文件，就好像它与应用程序放在同一个文件夹中一样。这对于您的本地项目结构可能是正确的，但角度应用程序通常会发送到前端（通常是浏览器），而不是您在本地文件系统上看到的所有文件都包含在此捆绑包中，包括json文件（如果它们不包含在内）放在右侧文件夹中，这就是无法找到文件的原因（404）。

您可以做的是将文件放在通常位于app文件夹旁边的资源文件夹中（如果您有这样的东西），然后使用assets/data.json的路径。这是http调用的样子：

this.http.get('assets/data.json').subscribe(res => {
    this.todos.push(...res.json());
});

异步Http调用

正如您在问题评论中提到的那样，您收到并返回json结果的方式也存在问题。角度Http模块工作异常，这意味着您的代码不会一行接一行地执行。我们来看看你的代码：

getTodoData() {  
  // this call is asynchronous 
  this.http.get('./data.json').subscribe(res => {
     // this code may be executed much later
     this.todos.push(...res.json());
  });
  // this code may be executed way before your todos are loaded
  return this.todos;
}

您可以采取的措施是返回从http调用返回的Observable，并订阅组件中的getTodoData() { // make the call, but return the whole Observable object return this.http.get('./data.json'); }而不是您的服务。在那里，您可以轻松设置您的待办事项。我们来看看。

todo.service.json

todos = [];
constructor(private todoService: TodoService) {
    // subscribe to the getTodoData call
    // when the result returns, set your todos directly
    todoService.getTodoData().subscribe(res => {
        this.todos.push(...res.json());
    });
}

app.component.ts

def safe_input(prompt, err_message, validation_fn):
    while True:
        value = raw_input(prompt)
        if validation_fn(value):
            return value
        print err_message

name = safe_input("NAME PLEASE\n", "Please chars dude", str.isalpha)
age = safe_input("Please type your age\n", "Please digits only", str.isdigit)

如何使用来自Json文件Angular2的数据的服务？

1 个答案: