首先，在组件中导入必要的模块

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

在组件类中创建FormGroup和FormArray

export class YourComponent implements OnInit {
  form: FormGroup;
  usersArray: FormArray;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      products: this.formBuilder.array([])
    });

    this.usersArray = this.formBuilder.array([]);
    this.form.addControl('users', this.usersArray);
  }
}

现在用您的数据填充表单

data$.subscribe(data => {
  const productsArray = this.form.get('products') as FormArray;

  data.ProductsBoughtBy.forEach(product => {
    const productGroup = this.formBuilder.group({
      name: product.Product.Product_Name,
      version: product.Product.Version,
      users: this.formBuilder.array([])
    });

    product.UsersBought.forEach(user => {
      const userGroup = this.formBuilder.group({
        id: user.User_ID,
        name: user.User_Name
      });

      (productGroup.get('users') as FormArray).push(userGroup);
    });

    productsArray.push(productGroup);
  });
});

现在使用formGroup指令和formArrayName指令将表单控件绑定到HTML模板

<form [formGroup]="form">
  <div formArrayName="products">
    <div *ngFor="let product of form.get('products').controls; let i = index" [formGroupName]="i">
      <div>{{ product.get('name').value }}</div>
      <div>{{ product.get('version').value }}</div>
      <mat-form-field appearance="fill">
        <mat-label>Users</mat-label>
        <mat-select [formControlName]="'users'" multiple>
          <mat-option *ngFor="let user of product.get('users').controls; let j = index" [value]="user.get('id').value">
            {{ user.get('name').value }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
</form>

希望对你有帮助