角反应式数组返回第一个索引值作为空对象

问题描述

在我的Angular窗体中，当从一种窗体移动到另一种窗体时，formControl无法呈现其特定值，而是显示上一次访问的窗体值。

例如。如果我访问过product_id = 1，并且formControl('productValue')的值类似于 10、11、12 。 现在，我要移至product_id = 2，以便那时它应该显示与product_id = 2相关的值（45，89，63），但是它将呈现以前访问的product_id = 1值即 10，11，12

  import { Injectable } from "@angular/core";
  import { FormGroup,FormBuilder,FormControl,FormArray } from "@angular/forms";
  @Injectable({
    providedIn: "root",})
    
  export class ProductService {
    public productForm: FormGroup = this.fb.group({
      inventoryCollection: new FormArray([
        new FormGroup({ productStatus: new FormControl(""),productValue: new FormControl("") })
      ])
    });
    
    getInventoryData(productId) {
      let controlsCollection = <FormArray>this.productForm.get('dataCollection')
      this.getCollectionById(productId).subscribe((res: any) => {
        res.forEach(data => {
          controlsCollection.push(new FormGroup({
            productStatus: new FormControl(data.status)
            productValue: new FormControl(data.productValue)
          }))
        });
      })
    }
  }

调用getInventoryData()方法的组件

export class ProductComponent implements OnInit {
    constructure(private router: Router) {
        this.route.parent.params.subscribe(params => { 
            this.params = { id: Number(params['id']) }
  })}

    ngOnInit() { 
        this.productService.getInventoryData(this.params.id)
    }
}

HTML格式如下：

  <form [formGroup]="productService.productForm">
    <div formArrayName="dataCollection">
      <div [formGroupName]="i" *ngFor="let element of details; let i = index">
        <input matInput type="text" formControlName="productValue">
        <mat-select formControlName="productStatus" value="{{productService.details[i].productStatus === '0' ? 'Active' : 'Inactive'}}">
          <mat-option value="AC">Active</mat-option>
          <mat-option value="IA">Inactive</mat-option>
        </mat-select>
      </div>
    </div>
  </form>

P.S：我访问过product_id = 1”，而“移至product_id = 2”则表示是路由器导航。

 http://localhost:4500/product/1/collection i.e product_id = 1
 http://localhost:4500/product/2/collection i.e product_id = 2

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）