Angular 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');
  }
}