Angular 2 Http 提供商的可观察订阅未触发

Question

我很难让 .subscribe() 方法触发 Angular 中的一个可观察对象。我的设置是一个提供程序，它向 Http Service 注入一个方法 returns 控制器可以与之交互和订阅的可观察对象。

我不清楚为什么当方法 returns observable 和控制器将订阅链接到它时订阅不会触发。非常感谢任何帮助。

用户提供商

@Injectable()
export class UserResource {

    constructor( protected http: Http ) {}

    public getUsers(): Observable<User[]> {
        return this.http.get( '/api/users' )
            .map( (response: Response) => <User[]>response.json() )
            .catch( (error: Response | any) => {
                console.log( error );
                return Observable.throw( error );
            });
    }
}

用户控制器

export class UsersController {
    public usersEnrolled: User[]   = [];
    public usersUnenrolled: User[] = [];

    constructor( private userResource: UserResource ) {}

    ngOnInit() {
        this.userResource.getUsers()
            .subscribe(( users: User[] ) => {
                console.log( 'users', users ); // does not fire
                this.usersUnenrolled = users.filter( (user: User) => !user.isEnrolled );
                this.usersEnrolled   = users.filter( (user: User) => user.isEnrolled );
            },
            ( error ) => console.log( 'error', error ),
            () => console.log( 'completed' )
        );
    }
}

更新订阅以包含错误和完成的回调

请注意，为了代码简洁，我排除了导入语句。

Answer 1

您应该在订阅中添加一个错误函数，以便您了解原因。

.subscribe(
     users: User[] => console.log( 'users', users ),
     error => console.log('error',error),
     () => console.log('completed')
);

您只是传入了 'next' 函数。我发现使用 subscribe()

的所有三个函数很有帮助

Answer 2

您正在订阅用户：User[]，但您正在映射到 json。如果你这样做：

.subscribe(users => {
console.log(users);
}

您是否将任何内容写入控制台？

Answer 3

可能相关，我从未见过您在服务中包含的构造函数模式；即调用 super()。 Angular 只需将其作为参数包含在构造函数中即可为您处理。然后将 constructor 正文留空。

通常，我会像这样实例化我的服务class：

import { Http, Response } from "@angular/http";

export class UserResource {

  constructor(private http: Http) {}

  getUsers(): Observable<User[]> {
    //
  }
}

但我会重申我的评论：use source breakpoints if using Chrome 或 debugger; 声明，这将使正在发生的事情更更清楚。如果您有源映射，您可以将断点放在 TypeScript 源中。

Answer 4

我是个笨蛋。代码有效，问题是 http.get() 中的 URL 与我们为来自 MockBackend 的模拟响应定义的 URL 不匹配。对不起，大家。一旦我解决了不匹配的 URL，它就按预期工作了。感谢您的帮助。

不确定如何将此标记为已接受的答案？

Angular 2 Http 提供商的可观察订阅未触发

Angular 2 Http provider's observable subscribe not firing

angular

rxjs

angular2-observables