Angular 2 - 访问订阅值

Question

如何正确访问formBuilder中的this.existingUsers？现在console.log(value)不显示在控制台中。 console.log(this.id)返回正确的参数。

export class UserComponent implements OnInit { 

    existingUser: any = {}; 

     ngOnInit() { 

     this.activatedRoute.params.subscribe((params: Params) => { 
      this.id = params['id']; 
      console.log(this.id); 
      this.db.object(`/users/${this.id}`).map(value => { 
      console.log(value); 
      this.existingUser = value; 
      }) 
     }); 

     console.log(this.existingUser); 

     this.userForm = this.formBuilder.group({ 
      first_name: [this.existingUser.first_name, Validators.required], 
     }) 
     }; 

} 

Answer 1

我并不完全清楚你正在尝试做什么......但你可能需要.map方法中的代码。就像这样：

export class UserComponent implements OnInit { 

    existingUser: any = {}; 

    ngOnInit() { 

    this.activatedRoute.params.subscribe((params: Params) => { 
     this.id = params['id']; 
     console.log(this.id); 
     this.db.object(`/users/${this.id}`).map(value => { 
     console.log(value); 
     this.existingUser = value; 
     console.log(this.existingUser); 

     this.userForm = this.formBuilder.group({ 
      first_name: [this.existingUser.first_name, Validators.required], 
     }) 
     }) 
    }); 

    }; 

}

或者把这些代码在一个被从这里调用的方法。

更新：这是我的应用程序，做类似的例子：

ngOnInit(): void { 
    this.productForm = this.fb.group({ 
     productName: ['', [Validators.required, 
          Validators.minLength(3), 
          Validators.maxLength(50)]], 
     productCode: ['', Validators.required], 
     starRating: ['', NumberValidators.range(1, 5)], 
     tags: this.fb.array([]), 
     description: '' 
    }); 

    // Read the product Id from the route parameter 
    this.route.params.subscribe(
     params => { 
      let id = +params['id']; 
      this.getProduct(id); 
     } 
    ); 
} 

getProduct(id: number): void { 
    this.productService.getProduct(id) 
     .subscribe(
      (product: IProduct) => this.onProductRetrieved(product), 
      (error: any) => this.errorMessage = <any>error 
     ); 
} 

onProductRetrieved(product: IProduct): void { 
    if (this.productForm) { 
     this.productForm.reset(); 
    } 
    this.product = product; 

    if (this.product.id === 0) { 
     this.pageTitle = 'Add Product'; 
    } else { 
     this.pageTitle = `Edit Product: ${this.product.productName}`; 
    } 

    // Update the data on the form 
    this.productForm.patchValue({ 
     productName: this.product.productName, 
     productCode: this.product.productCode, 
     starRating: this.product.starRating, 
     description: this.product.description 
    }); 
    this.productForm.setControl('tags', this.fb.array(this.product.tags || [])); 
} 

您可以找到全套的代码在这里：https://github.com/DeborahK/Angular2-ReactiveForms（在APM文件夹）

Answer 2

您正在尝试在设置数据之前获取asynchronous数据。

当某些内容异步时，它将在将来运行，并且订阅是异步的。

订阅功能中的所有内容在ngOnInit已完成后运行。这意味着，在existing_user被设置之前，您正在尝试访问first_name。

请尝试移动this.userForm东西到订阅功能如下：

this.activatedRoute.params.subscribe((params: Params) => { 
     this.id = params['id']; 
     console.log(this.id); 
     this.db.object(`/users/${this.id}`).map(value => { 
     console.log(value); 
     this.existingUser = value; 
     }) 
     console.log(this.existingUser); 

     this.userForm = this.formBuilder.group({ 
     first_name: [this.existingUser.first_name, Validators.required], 
     }) 
    });