Question

我无法想象这将如何在我的getProfile（）方法中登录到控制台但是如果我将this.user分配给用户它将不会返回我的json对象。

所以，如果我这样做：

getProfile() {
    this.userService.getPortInfo()
        .then(user => {
            console.log(user);
        });
}

这将登录到控制台。但如果我这样做：

getProfile() {
    this.userService.getPortInfo()
        .then(user => {
            this.user = user;
        });
}

并尝试在它返回空数组的任何地方使用console.log this.user。我的目标是将this.user分配给我的getProfile（）结果并在我的视图中使用它。不一定要注销。

请原谅我对这个问题的描述我对角色很新。

export class UserService {

/**
 *
 * @param http
 */
constructor(public http: Http) {
}

getPortInfo() {
    return this.http.get(environment.api)
        .toPromise()
        .then((response: Response) => response.json())
        .catch(this.handleError);
}

/**
 *
 * @param error
 * @returns {ErrorObservable<T>}
 */
private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }

    return Observable.throw(errMsg);
}

}

export class HomeComponent implements OnInit {

user: User[] = [];

constructor(private userService: UserService) {
}

getProfile() {
    this.userService.getPortInfo()
        .then(user => {
            console.log(user);
        });
}

ngOnInit() {
    this.getProfile();

    console.log(this.user);
}

_setUser(user) {
    return this.user = user;
}

}

Answer 1

你的console.log()方法是异步的（它返回了promise），并且javascript编译器不会等待promise的结果，它只会运行下一行代码（在你的情况下 - 这就是getProfile()。

这样做的正确方法是从getProfile() { return this.userService.getPortInfo() .then(user => this.user = user); }方法返回Promise：

ngOnInit()

并在.then仅在Promise结算后使用console.log()致电ngOnInit() { this.getProfile() .then(() => console.log(this.user)); }：

console.log()

这样trend mmpy只有在我们从Promise获得结果后才能运行。

Answer 2

我建议您使用 rxjs / do 运算符，如下所示

首先包含导入

import 'rxjs/add/operator/do';

然后修改您的代码，如

getProfile(): Observable<User[]> {
        return this.userService.getPortInfo()
        .then(user => {this.user = user;})
            .do(data => console.log("user data " + user))
                .catch(this.handleError);

    }
    private handleError(error: Response) {
            console.log(error);
            return Observable.throw(error.json().error || 'Internal Server error');
    }

Angular 2将类变量分配给结果

2 个答案: