Angular 5+AngularFirebase3：如何遍历Firebase的archived节点并显示子节点名？

嘿，我来帮你搞定这个问题！在Angular 5搭配AngularFirebase 3的环境下，要遍历Firebase数据库里的archived节点并显示它的子节点名称（也就是那些日期），其实步骤挺清晰的，我给你一步步拆解：

1. 确保AngularFirebase已完成基础配置 #

首先得确认你已经在项目里导入并配置好了AngularFireModule和AngularFireDatabaseModule，这是和Firebase数据库交互的基础。如果还没配置，得先把这一步搞定哦。

2. 在组件中注入服务并获取日期节点数据 #

在你的目标组件类里，先注入AngularFireDatabase服务，然后通过它获取archived节点的子节点键（也就是日期名称）：

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'; // Angular 5依赖RxJS 5，需手动导入map操作符

@Component({
  selector: 'app-archived-dates',
  templateUrl: './archived-dates.component.html',
  styleUrls: ['./archived-dates.component.css']
})
export class ArchivedDatesComponent implements OnInit {
  dates$: Observable<string[]>; // 用于存储日期节点名称的Observable

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    // 获取archived节点的快照，提取每个子节点的键（日期名称）
    this.dates$ = this.db.list('/archived').snapshotChanges()
      .map(changes => {
        // 遍历每个快照，取出节点的key值
        return changes.map(change => change.payload.key);
      });
  }
}

3. 在模板中遍历并展示日期 #

接下来在组件的HTML模板里，用*ngFor配合async管道来订阅Observable并渲染日期列表：

<div class="archived-dates-container">
  <h3>归档日期列表</h3>
  <!-- 用async管道订阅Observable，同时处理加载状态 -->
  <ul *ngIf="dates$ | async as dates; else loadingState">
    <li *ngFor="let date of dates" class="date-item">
      {{ date }}
    </li>
  </ul>
  <ng-template #loadingState>
    <p>正在加载归档日期...</p>
  </ng-template>
</div>

关键细节说明 #

• 为什么用snapshotChanges()？因为这个方法会返回包含节点快照的Observable，每个快照里不仅有节点的值，还有我们需要的key（也就是日期名称）。如果用valueChanges()的话，只会返回节点的值，拿不到子节点的名称，所以这里snapshotChanges()是更合适的选择。
• 别忘了导入RxJS的map操作符，Angular 5依赖的RxJS 5需要手动导入操作符才能使用。
• 一定要检查Firebase数据库的安全规则，确保你的应用有读取/archived节点的权限，不然会出现权限被拒绝的错误哦！

内容的提问来源于stack exchange，提问作者Gionata Zarantonello