Angular 订阅数据以在表格中显示 UI

Question

我尝试将此项目的详细信息传递给表单。但我没有为 this.itemDetails.item1Qty 等未定义。我想以 UI.

形式显示

this.wareHouseGroup = this.formBuilder.group({
  id: this.formBuilder.control(this.warehouse.id),

  sideId: this.formBuilder.control(this.warehouse.sideId.toString(), [
    Validators.required,
    Validators.min(1)
  ]),
 itemDetail: this.formBuilder.group({
    Item1Qty: this.formBuilder.control(this.itemDetails.item1Qty),
    item2Qty: this.formBuilder.control(this.itemDetails.item2Qty),
    item3Qty: this.formBuilder.control(this.itemDetails.item3Qty)
  })
});
  this.itemService.getItemDetails(this.item.uid).subscribe((result) => {
      this.itemDetails = result != null ? result : null;

      console.log(this.itemDetails);
    });

here is the console log
{"id":117,"TypeId":1,"item1Qty":563,"item2Qty":3.00,"item3Qty":0,"itemType":"Discount"}

Answer 1

当 initializing/building 形式为 itemDetails 数据仅在订阅期间返回时，您不能直接分配 itemDetails 值。

itemDetail: this.formBuilder.group({
    Item1Qty: this.formBuilder.control(this.itemDetails.item1Qty),
    item2Qty: this.formBuilder.control(this.itemDetails.item2Qty),
    item3Qty: this.formBuilder.control(this.itemDetails.item3Qty)
})

解决方案

相反，您应该执行以下步骤：

(1): 在构建表单时移除初始化itemDetails

itemDetail: this.formBuilder.group({
    Item1Qty: this.formBuilder.control(''),
    item2Qty: this.formBuilder.control(''),
    item3Qty: this.formBuilder.control('')
})

(2) 在订阅事件中，通过patchValue.

用值更新表单

this.itemService.getItemDetails(this.item.uid).subscribe(result => {
    this.itemDetails = result != null ? result : null;

    if (!result) return;

    this.wareHouseGroup.controls['itemDetail'].patchValue({
      Item1Qty: this.itemDetails.item1Qty,
      item2Qty: this.itemDetails.item2Qty,
      item3Qty: this.itemDetails.item3Qty
    });

    console.log(this.itemDetails);
});

Sample Solution on StackBlitz

参考资料

Updating parts of the data model

Angular 订阅数据以在表格中显示 UI

Angular subscribe data to show in Form UI

object

typescript

angular

angular-forms

解决方案

参考资料