Firestore数据未在反应形式的下拉列表中显示

Question

因此，我试图创建一个表单数组，并希望使用来自firestore的可观察到的数据填充select字段。由于某种原因，当我渲染第一个表单时，它将填充，但是如果我在反应性数组表单中添加任何其他表单，则不会填充下拉列表。我在这里缺少什么东西可以显示吗？

这里是可观察帐户的变量

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 };
        });
      })
    )
}

这里是*ngFor的表单数组，仅填充创建的第一个数组，但在第一个创建后的数组在select下拉列表中没有任何值。我正在使用async管道来解开可观察对象。

              <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>