angular - Angular リアクティブ formarray は最初の Index 値を null オブジェクトとして返します

Question

私のAngularフォームでは、あるフォームから別のフォームに移動している間、formControlは特定の値をレンダリングできず、代わりに最後にアクセスしたフォームの値を表示しています。

例えば。私が訪れた場合product_id = 1、そこには10, 11, 12 のformControl('productValue')ような値があります。その時点で関連する値（45、89、63）を表示する必要がありますが、以前にアクセスした値、つまり10、11、12をレンダリングしますproduct_id = 2product_id = 2product_id = 1

  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>

PS: 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