Angular 如何在FormArray（反应形式）中使用mat autocomplete（角材质autocomplete）

假设我有以下表单结构：

  this.myForm = this.formBuilder.group({
          date: ['', [Validators.required]],
          notes: [''],
          items: this.initItems()

        });
  initItems() {
    var formArray = this.formBuilder.array([]);
    for (let i = 0; i < 2; i++) {
      formArray.push(this.formBuilder.group({
        name: ['', [Validators.required]],
        age: ['', [Validators.required]],
      }));
    }

    return formArray;
  }

this.myForm=this.formBuilder.group({
日期：[''[需要验证人]，
注：['']，
items:this.initItems（）
});
initItems（）{
var formArray=this.formBuilder.array（[]）；
for（设i=0；i<2；i++）{
formArray.push（this.formBuilder.group({
名称：[''[Validators.required]]，
年龄：[''[validator.required]]，
}));
}
返回阵列；
}

---

名称控件应该是一个自动完成控件，我如何将所有的名称控件与一个自动完成列表相关联

我通过将

FormArray

中的每个

name

控件与

filteredOption

数组关联来解决这个问题：

  ManageNameControl(index: number) {
    var arrayControl = this.myForm.get('items') as FormArray;
    this.filteredOptions[index] = arrayControl.at(index).get('name').valueChanges
      .pipe(
      startWith<string | User>(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.options.slice())
      );

  }

在.html文件中，我们需要引用所需的filteredOption数组，我们可以使用

i

索引：

  <mat-option *ngFor="let option of filteredOptions[i] | async " [value]="option">
  {{ option.name }}
  </mat-option>

---

请提取您的相关部分，并将其与此答案一起发布在此处。启用[displayWith]时如何使用初始值填充数组字段？@EugeneZalivadnyi更新了问题以处理您的情况。但是，当我搜索此任务时，此答案似乎一直出现，当使用服务调用RESTAPI而不是本地存储的列表时，如何实现这一点？

  <mat-option *ngFor="let option of filteredOptions[i] | async " [value]="option">
  {{ option.name }}
  </mat-option>

 let formGroup = this.fb.group({
      name: [{value: { name: 'Mary' } , disabled: false}, [Validators.required]],
      age: ['', [Validators.required]],
    });