Question

我正在尝试建立一个论坛来学习角度知识，我正在使用Firebase，并希望显示页面上的所有面板以及每个面板下方的按钮，该按钮可根据面板的键或ID将您带到该面板的单个页面

这是获取数据的ts文件

getFirebaseData() {

    firebase.database().ref('/boards').on('child_added', (snapshot) => {
      this.boards.push(snapshot.val())
      console.log(snapshot.val());
      console.log(snapshot.key);

    })
  }

这是输出它的HTML

<ul id="all-boards">
    <li *ngFor="let board of boards">

      <div id="individual-board">
      <h3>{{board.boardName}}</h3>
      <h5>{{board.boardAbout}}</h5>
      <h6>{{board.boardCreator}}</h6><br/>
      <button class="btn" [routerLink]="['boards/', board.id]">View this Board</button>
      </div>

    </li>
  </ul>

这是数据库的json：

{
  "boards" : {
    "-LhlYN-BGfG_cdq0r1oO" : {
      "boardAbout" : "this is a test",
      "boardCreator" : "ngrogan15@gmail.com",
      "boardName" : "Test board"
    },
    "-Lhu2FnRklTnZp1JQzff" : {
      "boardAbout" : "Lets talk about test",
      "boardCreator" : "ngrogan15@gmail.com",
      "boardName" : "Another test "
    },
    "-LhwHeZfOGUryoh06OTs" : {
      "boardAbout" : "This is a Board all about music",
      "boardCreator" : "ngrogan15@gmail.com",
      "boardName" : "Music Board"
    }
  }
}

它可以正确获取数据库中存储的有关木板的所有详细信息，但该按钮显然不能起作用。由于我的数据库中没有id字段，因此id无法起作用。

是否可以从快照中获取每个板的密钥并将其存储在板阵列中，以便将其输出到HTML？

Answer 1

在Angular项目中使用库@ angular / fire在Firebase上工作。 https://www.npmjs.com/package/@angular/fire

Angular＆Firebase数据库获取所有键和值的快照

1 个答案: