Question

尝试使用Angular从firebase检索数据。我有一些数据存储在Firebase中，我想要显示存储在第三个孩子中的数据。这是我的firebase的样子。 check this image screenshot of Firebase structure

我的组件代码是

this.id = this.route.snapshot.paramMap.get('id');
if(this.id) {this.scheduleService.get(this.id).take(1).subscribe(p =>    this.date =p);}

我的服务代码位于

之下

getDates(){
    return this.db.list('date').snapshotChanges().map(action => {
      return action.map(
        item => {
          const $key = item.payload.key;
          const data = { $key, ...item.payload.val() };
          return data;
      });
    });
  }

这是显示数据的HTML代码。

<ul *ngFor="let item of date.artist1.avlTime">
  <li>
  {{item?.fromtimeAm}}
  </li>
</ul>

我不确定我做错了什么。尝试了不同的html类型来获取第三个/第四个子数据，但没有任何工作。

Answer 1

谢谢大家的支持。我解决了这个问题。我在服务中创建了新功能。

getAvlDate(id){
    return this.db.list('date/'+id+'/artist1/avlTime').snapshotChanges().map(action => {
      return action.map(
        item => {
          const $key = item.payload.key;
          const data = { $key, ...item.payload.val() };
          return data;
      });
    });
  }

然后将此代码添加到组件TS文件

this.scheduleService.getAvlDate(this.id).take(1).subscribe(p=>this.availableTime =p);

然后在HTML中使用代码来检索数据。

<ul *ngFor="let item of availableTime">
                  <li>
                    {{item.fromtimeHr}}{{item.fromtimeMn}} {{item.fromtimeAm}}
                  </li>
                </ul>

Answer 2

有时，angular不会将数组/列表识别为可以在ngFor中循环的内容。尝试调用yout .ts文件中的函数，该文件返回如下列表：

<ul *ngFor="let item of getAvlTime()">
  <li>
  {{item?.fromtimeAm}}
  </li>
</ul>

.ts文件：

getAvlTime() {
   if (this.date != undefined && this.date.artist1 != undefined) {
      return this.date.artist1.avlTime as any[];
   } else {
      return [];
   }
}

* ng不在Angular工作

2 个答案: