为什么我不能从Angular2调用ajax调用

时间:2016-01-18 18:44:09

标签: javascript angularjs ajax angular

我有这个组件:

import {Component} from 'angular2/core';
import {UserServices} from '../services/UserServices';

@Component({
    selector: 'users',
    template: '<h1>HOLA</h1>'
})

export class UsersComponent {
    users: Object;

    constructor(userServices: UserServices) {
        userServices.getUsersList();
    }
}

在UserServices中我有这段代码:

import {Http} from 'angular2/http'

export class UserServices {
    users: Array<any>;
    http: any;

    constructor(http: Http) {
        this.http = http;
    }

    getUsersList() {
        this.http.get('./users.json').map((res: Response) => res.json()).subscribe(res => console.log(res));
    }

}

我想调用users自定义标记的ajax调用。 但是我收到了这个错误:

  

无法解析UserServices(?)的所有参数。确保一切   有效的类型或注释。

当我删除http参数,导入和调用时,它没有错误,所以我猜问题就在那里,但我找不到问题

2 个答案:

答案 0 :(得分:6)

您在DI中缺少几个相关部分。

使用provide@inject或使用@Injectable修饰符进行注入的方法有多种。例如,您可以使用@Injectable装饰您的服务,即

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

// You do not need to do this, but creating an interface for more strong typing. You could as well create a User class here and use that as view model.
interface IUser{
  name:string;
}

@Injectable()
class UserServices {
    users: Array<IUser>;

    constructor(private http:Http) {}

    getUsersList():Observable<Array<IUser>> {
       return this.http.get('./users.json')
            .map((res: Response) => res.json());
    }

}

export {IUser, UserServices};

在根目录下注入UserServicesHTTP_PROVIDERS通常,您会在应用根级别的应用中注入所需的服务作为单例。如果没有,您可以在UserComponent装饰器的providers数组中单独注入服务。

bootstrap(UsersComponent, [HTTP_PROVIDERS, UserServices])

或在组件的装饰者中:

@Component({
    selector: 'users',
    template: `<h1>Users</h1>
    <div *ngFor="#user of users">
    {{user.name}}
    </div>

    `,
    providers:[UserServices] 
})

在你的组件中使用它并将 1 订阅到返回的observable。

export class UsersComponent {
    users: Array<IUser>;

    constructor(userServices: UserServices) {
        userServices.getUsersList().subscribe(users => this.users = users);
    }
}

1 您也可以使用async pipe(此应用取决于用例)并设置this.users的值作为observable,而不是明确地订阅它们。

<div *ngFor="#user of users | async">
  {{user.name}}
</div>

<子>和

this.users = userServices.getUsersList();

注意:在我刚刚导入map operator的示例中,为了将地图作为http(import rxjs/add/operator/map)返回的observable的一部分,因为它没有映射到系统Js config中全球范围内的paths财产。

这是一个有效的 plunker Demo

答案 1 :(得分:2)

该服务需要Injectable()注释

import {Injectable} from 'angular2/core';

@Injectable()
export class UsersComponent {

让DI能够将Http或其他依赖项注入其构造函数。