Question

我很难在Angular 2中的一个observable上触发.subscribe()方法。我的设置是一个为Http Service注入一个方法的提供程序，该方法返回一个控制器的observable可以与之交互，也可以订阅。

我不清楚为什么当方法返回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')
);

你只是传递了下一个＆＃39;功能。我发现使用subscribe（）

的所有三个函数很有帮助

Answer 2

我是个笨蛋。该代码有效，这是http.get()中我们为来自MockBackend的模拟响应定义的网址中的网址不匹配问题。我的道歉，大家。一旦我解释了不匹配的URL，它就按预期工作了。谢谢你的帮助。

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

Answer 3

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

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

你有什么东西写到控制台吗？

Answer 4

可能相关，我从未见过你在服务中包含的构造函数模式;也就是说，呼叫super()。 Angular通过简单地将它作为参数包含在构造函数中来为您处理。然后，将constructor正文留空。

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

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

export class UserResource {

  constructor(private http: Http) {}

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

但我会重申我的评论：use source breakpoints if using Chrome或debugger;语句，它会使发生的事情更多更清晰。如果您有源映射，则可以将断点放在TypeScript源中。

Angular 2 Http提供者的可观察订阅未被解雇

4 个答案: