Angular2 /错误：未找到集合 [英] Angular2 / Error: Collection not found

问题描述

我是Angular2的新手，并尝试建立一个Todo应用程序。

这是我的文件结构：

我的 todo.service.ts 代码（内部共享文件夹）

 从'@ angular / core'导入{Injectable};来自'@ angular / http'的
 import {Http，Headers}; 
 
 import'rxjs / add / operator / toPromise';来自'./todo.model'的
 
 import {ITodo}; 
 
 @Injectable（）
导出类TodoService {
构造函数（私有http：Http）{} 
 
 getTodos（）：Promise< ITodo [] > {
返回this.http.get（'api / todos'）
 .toPromise（）
 .then（res => res.json（）。data）
。赶上（this.handleError）; 
} 
 
 addTodo（todo：ITodo）：Promise< ITodo> {
返回this.post（todo）; 
} 
 
 deleteTodo（todo：ITodo）：Promise< ITodo> {
返回this.delete（todo）; 
} 
 
私人帖子（todo：ITodo）：Promise< ITodo> {
 let headers = new Headers（{
'Content-Type'：'application / json'
}）; 
 
返回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}`; 
 
返回this.http.delete（url，{headers}）
 .toPromise（）
 .then（res => todo）
 .catch（this .handleError）
} 
 
 private handleError（错误：任何）：Promise< any> {
 console.log（'错误发生>>>'，错误）; 
返回Promise.reject（error.message || error）; 
} 
} 
  

我的 main.ts 代码

 从'@ angular / platform-b​​rowser-dynamic'导入{bootstrap}; 
从'@ angular / http'导入{HTTP_PROVIDERS，XHRBackend}; 
从'angular2-in-memory- web-api'导入{InMemoryBackendService，SEED_DATA};来自'./shared/todo.data'的
 import {TodoSeedData};来自'./app.component'的
 
 import {AppComponent}; 
 
 bootstrap（AppComponent，[
 HTTP_PROVIDERS，
 {提供：XHRBackend，useClass：InMemoryBackendService}，
 {提供：SEED_DATA，useClass：TodoSeedData}，
]）; 
  

在我需要http之前，所有工作都没有错误。

发现类似的问题

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

解决方案

我在调用我的WebAPI时遇到了类似的问题。最后我不得不注释掉InMemoryDataService - 一旦我这样做，那么错误就消失了，我能够点击我的WebAPI：
AngularJS 2：从json文件中获取数据无法正常工作

I am very new to Angular2 and trying to build up a Todo app.

Here's my file structure:

My todo.service.ts code (inside shared folder)

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);
  }
}

My main.ts code

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 },
 ]);

Everything had been working without errors till I needed http.

Found sort of similar problem here

but it is not working to me.

Console.log shows error: Collection 'todos' not found.

I guess it's an issue with http. Please, help.

解决方案

I had a similar issue calling my WebAPI. In the end I had to comment out the InMemoryDataService - as soon as I did this then the error went away and I was able to hit my WebAPI: AngularJS 2 : Getting data from json file not working

这篇关于Angular2 /错误：未找到集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！