Question

您好我想迭代firebase的数据，需要在表格中显示它。

下面是我的firebase结构。我想在tables.i中显示账单，电子邮件ID和po号。可以在console.log中查看数据，但不会填入表格中。

EDI855

Bill To

-L9ac7clRzSVT-EfGxYv： “123456789”

-L9acDp2k34qDpubJFr6： “123456780”

电子邮件ID

-L9ac7cxYSALI3Ogj-NT： “test@gmail.com”

-L9acDp87NO83OQutasK： “test1@gmail.com”

宝数

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

Answer 1

尝试在init事件中实现您的查询

export class MyComponent implements OnInit {
items;

   constructor(public af: AngularFire) {
   }

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

或者甚至更好，为了充分利用实时数据库，您应该考虑使用async管道。当您这样做时，您的应用将对数据的任何更改做出反应并立即刷新UI。

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

在这种情况下，请记住，您正在更改items的类型（它不再是项目列表，而是一个可观察的项目），因此不需要订阅它。 async管道将完成工作。

constructor(public af: AngularFire) {
    this.items = af.database.list('/EDI855');
}

无法使用角度2中的键从firebase中检索数据

1 个答案: