Как создать и получить доступ к массиву объектов в firebase вручную в angular?

Question

Я создал список из нескольких карточек из массива объектов, хранящихся в user.component.ts

user.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../service/auth.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})

export class UserComponent implements OnInit {

  constructor(public auth: AuthService) { }

  ngOnInit() {
  }
  logout(){
    this.auth.logout();
  }



cards = [
    {
      title: 'Card Title 1',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 2',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 3',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 4',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 5',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 6',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 7',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },
    {
      title: 'Card Title 8',
      description: 'Some quick example text to build on the card title and make up the bulk of the card content',
      buttonText: 'Button',
      img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg'
    },

  ];


}

Теперь, как я могу создать подобный массив Объект в базе данных Firebase и получить его для создания списка карт в user.component. html

user.component. html

<select #myInput>
  <option selected></option>
  <option>Card Title 1</option>
</select>
 </span>
 <div class="container" >
  <div class="row">
    <div class="col-md-3 mx-auto my-5" *ngFor="let card of cards | filterBy: 'title': myInput.value ">
      <mdb-card>
        <mdb-card-img [src]="card.img" alt="Card image cap">
        </mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>{{card.title}}</h4>
          </mdb-card-title>

          <mdb-card-text>
            {{card.description}}
          </mdb-card-text>

          <button mdbBtn color="primary">{{card.buttonText}}</button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

при изменении данных в массиве следует отразить в списке карточек. Что делать?

Answer 1

1. Настройка учетной записи Firebase
2. Создание проекта Firebase
3. Включение FireStore
4. Добавление angularFire в ваш проект (https://github.com/angular/angularfire)
5. Прочтите о концепциях Collection Document, Query in firebase firestore
6. Разработка кода
7. Отладка
8. Разработка кода
9. Google проблема, которую вы встреча
10. Исправить код
11. Готово