Получать и отображать данные из Firebase в Angular - PullRequest
Новая
       32

Получать и отображать данные из Firebase в Angular

0 голосов
/ 10 ноября 2019

У меня есть несколько записей в FireBase, которые я хочу отобразить на моей HTML-странице. Я прикрепил структуру базы данных. Теперь я хочу отобразить годы в виде массива (который можно нажимать). При выборе определенного года я хочу, чтобы соответствующие записи были получены в моем коде.

Я попытался получить годы, но не смог отобразить их на странице. Я пробовал статический массив как лет = ["1999", "1994"], который работал. Только данные из базы данных не извлекаются и не отображаются. 

<div class="list-group " *ngFor="let year of years">

    <a routerLink="records"  routerLinkActive="active" >
        <mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year}}</a>

</div>

export class NavigationComponent implements OnInit {
  @ViewChild('sidenav', {static: true}) sidenav: ElementRef;

  //years = ['1999', '2004', '2019'];
  clicked: boolean;
  resizedImage: Blob;

  years:AngularFireList<any[]>;
  // TODO: Need to fix the click effect of years





  constructor(af:AngularFireDatabase,
    private router: Router,

    //private userService: UserService
    //private ng2ImgMax: Ng2ImgMaxService
  ) {
    this.clicked = this.clicked === undefined ? false : true;
    this.years=af.list('/years/Akhilesh');}

Это машинописный код ^

Database Structure

1 Ответ

1 голос
/ 10 ноября 2019

В вашем коде происходит несколько проблем.

Во-первых, поскольку вы переходите от использования статического массива к вызову из базы данных, теперь вы должны использовать Observable, который повлияет на ваш шаблон. - вам нужно будет передать через | async.

(Чтобы продемонстрировать, я просто собираюсь вывести JSON в моем примере, вам нужно будет настроить фактическую структуру объекта): 

<div class="list-group" *ngFor="let year of years | async">
  {{ year | json }}
</div>

Если вам нужно больше узнать о том, что здесь происходит, см. эту часть урока Angular Tour of Heros .

Далее, ваше объявление о years необходимоподлежит корректировке: 

years: Observable<any>;

(в идеале вы должны использовать финская нотация для обозначения наблюдаемого, но я опущу это для согласованности с вашим кодом).

Естественно, если вы еще не импортировали его, вам также понадобятся: 

import { Observable } from 'rxjs';

Наконец, недостаточно просто сохранить объект AngularFireList, вы должны фактически подписаться наперемены. В этом случае я буду использовать snapshotChanges, который дает полную структуру, включая ключи, но вы также можете посмотреть на valueChanges в зависимости от ваших потребностей. (Для доступа к таким клавишам, как «1994», вы должны использовать year.key в своем шаблоне и snapshotChanges). 

    this.years=af.list('/years/Akhilesh').snapshotChanges();

Я рекомендую вам внимательно посмотреть пример в документации AngularFire.

...