Question

从订阅中获取数据时，我的数据没有绑定到我的本地变量。

我有两个组件和一个服务。父组件调用从服务到http get的方法，get包括我需要绑定的用户对象。但是，当console.logging对象超出订阅时，它似乎未定义。

这是我的代码：

父组件：

selectedUser : User;
  onUserRowSelect(event): void {
    this.router.navigate(['../childComponent'], { relativeTo: this.route });

    this.formService.getUser(event.data.USER_ID).subscribe(result => {
      console.log(result); // <-- Object is logged properly.
      this.selectedUser = result; // Assigning the local @Input variable to the result
    });
  }

子组件：

  @Input() selectedUser : User;

      ngOnInit() {
        console.log(this.selectedUser); // Returns undefined.
      }

使用Http服务：

getUser(id: number): Observable<User> {
    const _url = 'myURL/getuser/' + id;
    const headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    const options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
        .map(response => {
            const responseAsObject = response.json();
            this.myUser = responseAsObject;
            return responseAsObject;
        });
}

所以我的问题在于，即使在将@input装饰器添加到变量之后，selectedUser在子组件中也显示为未定义。

Answer 1

这是异步的，因此当您的子组件初始化时，父项和子项中的selectedUser将为undefined，因为您显然没有初始化它。但这并不重要，如上所述，这是异步的。回复需要一段时间才能到来。要查看@Input中的更改，您可以使用生命周期OnChanges，只要@Input变量发生更改，就会触发生命周期ngOnChanges() { if (this.selectedUser) { console.log(this.selectedUser) } }。所以在你的孩子身上做：

{{1}}

Answer 2

您要做的第一件事是向HTTP GET方法添加一个catch运算符。在该catch中，您可以记录是否发生错误。如果发生错误，那么您的变量将保持未定义。

return this.http.get(_url, options)
    .map(response => {
        const responseAsObject = response.json();
        this.myUser = responseAsObject;
        return responseAsObject;
    })
    .catch(error => log(error));

添加catch操作符后，打开浏览器控制台并检查是否发生错误，然后检查服务器。

订阅不将数据绑定到输入装饰器

2 个答案: