Angular FormArray valueChanges在更改后多次执行

是因为valueChanges是一个Observable对象，它会在FormArray的值发生变化时发出一个新的值。当FormArray的值发生变化时，valueChanges会被触发，从而执行相应的回调函数。

这种多次执行的情况可能是由于以下原因导致的：

表单控件的值被多次更改：如果在FormArray的值发生变化后，又对表单控件的值进行了多次更改，那么valueChanges会被多次触发。
表单控件的值被多个订阅者订阅：如果有多个订阅者同时对FormArray的valueChanges进行订阅，那么每个订阅者都会收到一个新的值，从而执行相应的回调函数。

为了解决这个问题，可以采取以下措施：

取消多余的订阅：在订阅valueChanges之前，先取消之前的订阅，确保只有一个订阅者。
使用debounceTime操作符：使用debounceTime操作符可以延迟一段时间后再执行回调函数，从而避免频繁执行。
使用distinctUntilChanged操作符：使用distinctUntilChanged操作符可以确保只有在值发生变化时才执行回调函数，避免重复执行。

下面是一个示例代码，演示如何使用debounceTime和distinctUntilChanged来处理FormArray valueChanges的多次执行问题：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <input [formControlName]="i" (ngModelChange)="onItemChange(i)">
        </div>
      </div>
    </form>
  `,
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;
  items: FormArray;

  ngOnInit() {
    this.myForm = new FormGroup({
      items: new FormArray([]),
    });

    this.items = this.myForm.get('items') as FormArray;

    // 取消之前的订阅
    this.items.valueChanges.unsubscribe();

    // 使用debounceTime和distinctUntilChanged处理valueChanges
    this.items.valueChanges
      .pipe(
        debounceTime(300),
        distinctUntilChanged()
      )
      .subscribe(() => {
        console.log('FormArray value changed');
      });
  }

  onItemChange(index: number) {
    // 对表单控件的值进行更改
    this.items.controls[index].setValue('new value');
  }
}

在上面的示例代码中，我们使用了debounceTime(300)来延迟300毫秒后执行回调函数，使用distinctUntilChanged()来确保只有在值发生变化时才执行回调函数。这样可以有效地避免FormArray valueChanges的多次执行问题。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。腾讯云云服务器提供了可靠、安全、高性能的云计算服务，适用于各种应用场景。腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务，提供了稳定可靠的数据存储和管理能力。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql