Angular2，如何在service.ts中使用JSON数据？

todo.service.ts

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

@Injectable()
export class TodoService {

    public todos
    constructor(private http:Http) { }
    getDatas(){
        this.http.get('../json/test_data.json')
            .map((res:Response) => res.json())
            .subscribe(
            data => {this.todos = data},
            err => console.error(err),
            () => console.log('done')
        );
    }
    get(query = ''){
      return new Promise(resolve => {
        var data;
        var todos = this.getDatas();
        console.log("todos ================== " + todos)
        if(query === 'completed' || query === 'active'){
          var isCompleted = query === 'completed';
        //   data = todos.filter(todo => todo.isDone === isCompleted);
        } else {
          data = todos;
        }
        resolve(data);
      });
    }
}

todo.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TodoService } from './todo.service';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css'],
  providers: [TodoService]
})
export class TodoComponent implements OnInit {

    private todos;
    private activeTasks;
    private newTodo;
    private path;

    constructor(private todoService: TodoService, private route: ActivatedRoute) { }

    getTodos(query = ''){
      return this.todoService.get(query).then(todos => {
        this.todos = todos;
        // this.activeTasks = this.todos.filter(todo => todo.isDone).length;
      });
    }

    ngOnInit() {
        this.route.params.subscribe(params => {
            this.path = params['status'];
            this.getTodos(this.path);
        });
    }
}

我想，如果我使用“

getDatas（）{…getJSON…}

” 我可以从“test_data.json”文件中获取这些数据。 我想，我可以把这些数据放到“

this.getDatas（）；

”

但是，当我在todo.service.ts文件中使用“

console.log”（“todos================================“+todos）

”时，结果是“未定义”

---

有什么问题吗？

您无法从异步执行切换回同步执行。
如果要在异步调用的数据到达后执行代码，则必须始终链接调用（

然后，
映射
，…）：

无法从异步执行切换回同步执行。

如果要在异步调用的数据到达后执行代码，则必须始终链接调用（
然后，
映射
，…）：

我写了这段代码，没有错误消息。但是，什么也没发生。我看不到控制台消息。无法想象“什么都没发生”。你没有得到任何控制台输出？我只是得到这样一条消息“Angular正在开发模式下运行。调用enableProdMode（）以启用生产模式。”我更新了
get
方法，并为
getTodos
添加了更改。我有两个问题，get（查询=“”）{//var data；//我写了这段代码，没有错误消息。但是，什么都没有发生。我看不到控制台消息。无法想象“什么都没有”发生。你没有得到任何控制台输出吗？我只是得到消息“Angular正在开发模式下运行。调用enableProdMode（）以启用生产模式。”我更新了
get
方法，并为
gettoos
添加了更改，我得到了两个问题，get（query=''）{//var数据//
getDatas(){
  return this.http.get('../json/test_data.json') // <<< return the observable
        .map((res:Response) => res.json())
        .map( // <<<=== instead of subscribe
        data => {
          this.todos = data; // <<< might not be necessary (done at caller site as well)
          return data;
        } //,
        // err => console.error(err), // <<< use catch if you need to handle errors here
        // () => console.log('done') // <<< use finally if you need to do something when the request is completed
    );
}
get(query = ''){
    // var data; // <<< redundant
    return this.getDatas().map(todos => 
      console.log("todos ================== " + todos)
      if(query === 'completed' || query === 'active'){
        var isCompleted = query === 'completed';
        return data = todos.filter(todo => todo.isDone === isCompleted);
      } else {
        return todos;
      }
    });
}

getTodos(query = ''){
  return this.todoService.get(query).subscribe(todos => {
    this.todos = todos;
    // this.activeTasks = this.todos.filter(todo => todo.isDone).length;
  });
}