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之前，一切都没有错误。

发现类似的问题here

但这对我不起作用。

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

我猜这是http的问题。 请帮忙。

Answer 1

我有一个类似的问题叫我的WebAPI。最后我不得不注释掉InMemoryDataService - 一旦我这样做，那么错误就消失了，我能够点击我的WebAPI： AngularJS 2 : Getting data from json file not working

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 here

Answer 3

我也遇到了与模块中的InMemoryWebApiModule.forRoot(InMemoryDataService)注释相同的问题，并且对我来说很好用

Answer 4

这可能会帮助一些在这里找到自己的人。如果未配置集合，则有一个配置选项可以传递到实时服务器：

passThruUnknownUrl: true

请参阅https://github.com/angular/in-memory-web-api#pass-thru-to-a-live-server

Answer 5

如@pxp所述，您可以在“内存数据库”配置中使用passThruUnknownUrl，并且将允许内存数据库未知的URL继续进行，

在您的app.module.ts文件中：

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    InMemoryWebApiModule.forRoot(AppData, { delay: 1000, passThruUnknownUrl: true }),
],