Невозможно получить данные из firebase с помощью ключей в angular 2

Привет, я хочу повторить данные firebase и отобразить их в таблице.

Ниже приведена структура моей firebase. Я хочу отобразить счет, идентификатор электронной почты и номер почтового ящика в таблицах. Я вижу данные в console.log, но они не заполняются в таблицах.

ЭДИ855

Законопроект о

-L9ac7clRzSVT-EfGxYv: "123456789"

-L9acDp2k34qDpubJFr6: "123456780"

Электронный идентификатор

-L9ac7cxYSALI3Ogj-nt: "[email protected]"

-L9acDp87NO83OQutasK: "[email protected]"

Номер заказа

-L9ac7cvtNNzg7hYa355: "123456789"

-L9acDp4PPOSo9VL9ysB: "VV002"

Ниже моя таблица html:

div class="table-responsive">          
<table class="table">
  <thead>
    <tr>
    <th>No</th>
      <th>Bill To</th>
      <th>Requested by</th>
      <th>Po Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>>
      <td *ngFor="let x of items">{{x.$value}}</td>

    </tr>
  </tbody>
</table>

Ниже приведен мой код firebase:

 constructor(public af: AngularFire) {
    af.database.list('/EDI855').subscribe(x =>{
      this.items=x;
      console.log(this.items)
    }

firebase angular firebase-realtime-database html
person Prajan    schedule 09.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вместо этого попробуйте реализовать свой запрос в событии инициализации.

export class MyComponent implements OnInit {
items;

   constructor(public af: AngularFire) {
   }

   ngOnInit() {
      this.af.database.list('/EDI855').subscribe(x =>{
      this.items=x;
   }
}

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

<td *ngFor="let x of items | async">{{x.$value}}</td>

Просто в этом случае помните, что вы меняете тип items (это уже не список элементов, а наблюдаемое из элементов), поэтому подписываться на него не нужно. Труба async сделает свою работу.

constructor(public af: AngularFire) {
    this.items = af.database.list('/EDI855');
}
person Marcos Silva    schedule 09.04.2018
comment
Привет, Маркос, я пробовал вышеописанное, но данные все равно не заполняют таблицы. - person Prajan; 11.04.2018