Angular2 /错误:未找到集合

Question

我是Angular2的新手,并试图建立一个Todo应用程序.

这是我的文件结构:

我的todo.service.ts代码(在共享文件夹中)

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { ITodo } from './todo.model';

@Injectable()
export class TodoService {
 constructor(private http: Http){}

 getTodos(): Promise<ITodo[]> {
    return this.http.get('api/todos')
            .toPromise()
            .then(res => res.json().data)
            .catch(this.handleError); 
}

addTodo(todo: ITodo): Promise<ITodo> {
    return this.post(todo);
}

deleteTodo(todo: ITodo): Promise<ITodo> {
    return this.delete(todo);
}

private post(todo: ITodo): Promise<ITodo> {
    let headers = new Headers({
        'Content-Type': 'application/json'
    });

    return this.http.post('api/todos', JSON.stringify(todo), { headers })
    .toPromise()
    .then(res => res.json().data)
    .catch(this.handleError)
}

private delete(todo: ITodo): Promise<ITodo> {
    let headers = new Headers({
        'Content-Type': 'application/json'
    });

    let url = `api/todos/${todo.id}`;

    return this.http.delete(url, { headers })
    .toPromise()
    .then(res => todo)
    .catch(this.handleError)
}

private handleError(error: any): Promise<any> {
    console.log('The error occured >>>', error);
    return Promise.reject(error.message || error);
  }
}

我的main.ts代码

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS, XHRBackend } from '@angular/http';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory- web-api'; 
import { TodoSeedData } from './shared/todo.data';

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

bootstrap(AppComponent,[
  HTTP_PROVIDERS,
  { provide: XHRBackend, useClass: InMemoryBackendService },
  { provide: SEED_DATA, useClass: TodoSeedData },
 ]);

在我需要http之前,一切都没有错误地工作.

在这里发现了类似的问题

但这对我不起作用.

Console.log显示错误:找不到集合'todos'.

我想这是http的问题.请帮忙.

Answer 1

我有一个类似的问题叫我的WebAPI.最后我不得不注释掉InMemoryDataService - 一旦我这样做,那么错误就消失了,我能够点击我的WebAPI: AngularJS 2:从json文件中获取数据不起作用

Answer 2

对于InMemoryWebApi使用InMemoryDataService(模拟实际后端api)而不使用Angular2 Http时,这似乎是一个问题.您可以通过关闭app.module.ts中的内存web api来确认这一点,然后查看http调用是否成功点击了您的API.

InMemoryBackendService中的createDb()方法应该看起来像这样才能使它工作.

export class InMemoryBackendService implements InMemoryDbService {
createDb() {
   let todos = <object>,
   todos2 = <object>;        <==== collection todos is defined here...
   return {todos,todos2};    
 }
}

替换为模拟数据对象.
请参阅说明文件在内存中的Web API 这里

Answer 3

我也有同样的问题，我InMemoryWebApiModule.forRoot(InMemoryDataService)在我的模块中注释掉了它，它对我来说工作正常