Данные Firestore не отображаются в раскрывающемся списке реактивных форм - PullRequest
Новая
       6

Данные Firestore не отображаются в раскрывающемся списке реактивных форм

0 голосов
/ 12 ноября 2018

Итак, я пытаюсь создать массив форм и хочу заполнить поле выбора некоторыми данными из наблюдаемой, поступающей из пожарного магазина. По какой-то причине, когда я отображаю первую форму, она заполняется, но если я добавляю какие-либо дополнительные формы в форму реактивного массива, она не заполняет раскрывающийся список. Я что-то упускаю здесь, что позволит это показать?

Вот переменная, которая получает наблюдаемую учетную запись 

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 заполняет только первый созданный, но любой созданный после первого не имеет значений в выпадающем списке. Я использую трубу 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>
...