Angular & Firebase db получают снимок всех ключей и значений - PullRequest
0 голосов
/ 23 июня 2019

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

Вот файл 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"
    }
  }
}

Правильно получает все сведения о доске, которые хранятся в базе данных, но кнопка не будет работать, так как очевидно, что board.id не будет работать, поскольку в моей базе данных нет поля id.

Есть ли способ получить ключ для каждой доски из моего снимка и сохранить его в массиве моих досок, чтобы я мог вывести его в HTML?

1 Ответ

0 голосов
/ 23 июня 2019

Используйте библиотеку @ angular / fire в проектах Angular для работы с Firebase. https://www.npmjs.com/package/@angular/fire

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...