Taobin-Recipe-Manager/client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.html

<div [formGroup]="toppingForm">
  <div formArrayName="toppingList" *ngFor="let topping of toppingList.controls; let i = index">
    <div formGroupName="{{ i }}">

      <input type="checkbox" formControlName="isUse"/>
    <!-- toppingGroup -->
    <ng-select
      appendTo="body"
      [clearable]="false"
      [compareWith]="this.compareFunc"
      formControlName="groupID"
      (close)="getDefaultOfGroup(getGroupIdByIndex(i))"
    >
      <ng-option
        *ngFor="let item of allToppingsDefinitions"
        [value]="item.groupId.toString()"
      >
        <div>{{ item.name }} ({{ item.groupId }})</div>
      </ng-option>
    </ng-select>
    <!-- defaultSelect -->
    <ng-select
      appendTo="body"
      [clearable]="false"
      [compareWith]="this.compareFunc"
      formControlName="defaultIDSelect"
    >
      <ng-option
      *ngFor="let item of getMembersByGroupId(getGroupIdByIndex(this.index!))"
      [value]="item.id.toString()"
    >
      <div>{{ item.name }} ({{ item.id }})</div>
    </ng-option>
    </ng-select>
  </div>
    </div>

</div>