Myujth

So I am trying to create a form array and want to populate the select field with some data from an observable coming from firestore. For some reason when I render the first form it populates but if I add any additional forms in the reactive array form it does not populate the dropdown. Is there something I am missing here that will allow it to show?

Here is the variable that gets the account observable

ngOnInit() 
 this.accountList = this.accountsCollection.snapshotChanges().pipe(
 map((actions) => 
 return actions.map((a) => 
 const data = a.payload.doc.data();
 return id: a.payload.doc.id, ...data ;
 );
 )
 )

Here is the form array the *ngFor is only populating the first one created but any created after the first does not have any values in the select dropdown. I am using the async pipe to unwrap the observable.

 <div formArrayName="debit">
 <div *ngFor="let debit of debitForms.controls; let i=index" [formGroupName]="i">
 <td class="rows">
 <select class="input" formControlName="debitAccount" name="debitAccount" required>
 <option value="" disabled selected>Select an account</option>
 <option *ngFor="let account of accountList | async" [ngValue]="account"> account.name </option>
 ^^^ does not render any values after the first form of the array is created
 </select>
 </td>
 <td class="rows"><input class="input" type="number" name="debitAmount" formControlName="debitAmount"
 placeholder="Enter amount" /></td>
 <td class="rows"></td>
 <span class="button is-link is-danger" (click)="deleteDebit(i)">Delete</span>
 </div>
 </div>