Angular/TypeScript 更新对象数组的元素

Question

please forgive if my question is stupid but I have no idea what am I doing wrong. I have array of objects

export interface IOptionsData {
  option: string;
  optionPrice: number;
  benefit: string;
  benefitPrice: number;
  oneshotPrice: number;
  commitmentPeriod: number;
}

formData: IOptionsData[] = [];

And saving data from form in it

onOptionChange(i) {
    console.log(i);
    console.log(this.productForm.controls['user_options']);
    this.formData[i].option = this.productForm.controls['user_options'].value[i].option;
    this.formData[i].commitmentPeriod = this.productForm.controls['user_options'].value[i].commitmentPeriod;
    console.log(this.formData);
    ...
  }

On first element everything seems normal

My form data:

And my array data:

But when I update another item in form, instead of updating that element in array, it updates complete array to that values

onChange function is called with correct parameter, there is no multiple functions calls

Have no idea why is this happening

Please if you know any reason why it would

Thank you

EDIT: forgot to mention

Before I went with array of objects, I used individual arrays for each value I need to store.

  selectedOptions: string[] = [];
  selectedBenefits: string[] = [];
  selectedPrices: number[] = [];
  benefitPrices: number[] = [];
  oneshotBenefitPrices: number[] = [];

And same update worked as intended, only updated value is getting updated

this.selectedOptions[i] = this.productForm.controls['user_options'].value[i].option;

EDIT No2:

To reproduce this error you don't need html template.

Here is part of.ts file

export interface IOptionsData {
  option: string;
  optionPrice: number;
  benefit: string;
  benefitPrice: number;
  oneshotPrice: number;
  commitmentPeriod: number;
}

demoOptionsData: IOptionsData = { option: null, optionPrice: 0, benefit: null, benefitPrice: 0, oneshotPrice: 0, commitmentPeriod: 24 };

ngOnInit() {
  /* Initiate the form structure */
    this.formData.push(this.demoOptionsData);
    this.formData.push(this.demoOptionsData);
    this.formData.push(this.demoOptionsData);

    this.formData[1].option = 'TEST';
    console.log(this.formData);
  }

Answer 1

Solved by comment from @htn formData is an array of the SAME REFERENCE demoOptionsData, so, the result is expected