Как отображать данные из FireBase в цикле - PullRequest
Новая
       9

Как отображать данные из FireBase в цикле

2 голосов
/ 03 мая 2019

У меня есть данные в FireBase, я хотел бы отобразить их с помощью цикла. 

    items: any;

    constructor(db: AngularFireDatabase) {
        db.list(`/users/`).snapshotChanges()
            .subscribe(o => { this.items = o; console.log(o) });
    }

    <div *ngFor="let item of items;">
        Items: {{item.key}}
        <p *ngFor="let device of item;">{{device.name}}</p>
    </div>

Я не могу отобразить второй цикл, NgFor поддерживает только привязку к итерируемым объектам, таким как массивы. Как конвертировать это?

1 Ответ

1 голос
/ 15 мая 2019

В firebase получение данных с помощью snapshotChanges () включает метаданные с фактическими данными в виде {key, payload, prevKey, type}.

В случае пользователя вы пытаетесь получить доступ к item.name , но он не определен.

Вы должны извлечь полезную нагрузку перед итерацией. Вы можете попробовать что-то вроде этого. 

items$: any;

    constructor(db: AngularFireDatabase) {
        this.items$ = db.list(`/users/`).snapshotChanges()
            .pipe(map(changes => changes.map(c => ({
                key: c.key,
                payload: c.payload.val(),
                type: c.type,
                prevKey: c.prevKey
            }))));
    }

    <div *ngFor="let item of items$ | async;">
        Items: {{item.key}}
        name: {{item.payload.name}}
    </div>

Если вам не нужна клавиша , используйте valueChanges () вместо snapshotChanges ().

Подробнее https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

...