angular - Angular フォーム - オブジェクトを使用するために formArrayName で選択するために formControlName をバインドする方法

Question

selectformArrayName 内のバインディング オブジェクト複合バインディングを設定する方法を理解しようとしています。formControlName には配列内の現在のアイテムへの参照が必要だと思いますが、アクセスする方法がわかりません。

<div formArrayName="users">
    <div *ngFor="let u of users.controls; let i=index" [formGroupName]='i'>
      user {{i}}: <select formControlName='id'[compareWith]="compareFn">
        <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
      </select>
    </div>
  </div>

単一選択 (希望どおりに動作) と値を「id」にプッシュする配列を使用してデモを作成しました。 https://stackblitz.com/edit/angular-d2uaa1

どんな助けでも大歓迎です。

編集

キーポイント：

• UsersGroupオブジェクト全体をすべてのプロパティ (id と login) にバインドします
• 最小追加コード (KISS)

解決策(@JT_82 コメントに基づく)

   <div *ngFor="let u of users.controls; let i=index">
      <select [formControlName]='i' [compareWith]="compareFn">
        <option *ngFor="let a of avaliableUsers" [ngValue]='a'>{{a.login}}</option>
      </select>
    </div>

 ngOnInit(): void {
    this.owner.patchValue(this.group.owner);
    this.group.users.forEach(u => {
      this.users.push(this.fb.control(u))
    });
  }

 compareFn(a, b): boolean {
    return a.id === b.id;
  }