如何从 Firebase 获取数据以创建列表？答案

【问题标题】：How to get the data from Firebase to create a list?如何从 Firebase 获取数据以创建列表？
【发布时间】：2019-04-29 21:10:23
【问题描述】：

我的目标是创建一个作品集页面，用户可以在其中通过填写表格（标题、技术、图像、yaer 等）来添加作品。提交的数据将被添加到数组中，并以列表的形式呈现。

我可以将数组上传到 firebase，但我不知道如何在网站启动时上传它。我希望它在每次提交项目时更新和刷新页面上的列表。我花了几个小时寻找正确的方法。

//SERVER.SERVICE

export class ServerService {
  url:string = 'https://basic-31cd5.firebaseio.com';

constructor(
  private httpClient: HttpClient,
  private artService:ArtService
  ) { }

  storeArtworks() {
    return this.httpClient.put( this.url +"/artworks.json", 
    this.artService.getArtworks());
  }

  getArtworks() {
    return this.httpClient.get<HttpResponse<Art[]>> 
  (this.url+"/artworks.json")};
  }

//ART.SERVIVCE

import { Art } from "../modules/art.module"
import { Subject } from 'rxjs';

export class ArtService{
    listChanged = new Subject<Art[]>();

    public list: Art[] = [];
        // new Art ("The Young Ladies of Avignon", "painting", 1907),
        // new Art ("Kiss", "painting", 1908),
        // new Art ("Dance", "painting", 1911)

    subject = new Subject<string>();



    setArt(artworks:Art[]=[]){
        this.list = artworks;
        this.listChanged.next(this.list);
    }

    getArtworks() {
        return this.list;
    }

    addArt(f){
        this.list.push( new Art( f.value.titel, f.value.technique, f.value.year));
    }

    remove(titel){
    // this.list.splice(i, 1)
        for (let i = 0; i < this.list.length; i++) {
          if( this.list[i].titel === titel )
          { this.list.splice( i,1 ) }
        }
  }
}

//DashboardComponent

  list;

  constructor(
    private serverService:ServerService, private artService:ArtService ) 
    {}

  ngOnInit() {
    this.list = this.artService.getArtworks();
  }

  submit(form:NgForm){
    this.artService.addArt(form);
  }

  removeItem(titel){
    this.artService.remove(titel)
  }
  onSave(){
    this.serverService.storeArtworks()
      .subscribe( (res:Response) => console.log(res));
  }
}

【问题讨论】：

我回答了你的一些问题，看来你不接受答案。人们会花时间回答您的问题，因此，如果提供的答案，回答您的问题，请点击他们答案旁边的向右箭头来接受他们的答案。

标签： javascript angular firebase firebase-realtime-database httpclient

【解决方案1】：

试试这个代码：

getList() {
        let listDB = this.db.database.ref('/tasks').child(this.uid);
        listDB.on('value', (snapshot) => {
            const items = snapshot.val();
            if(items) {
                this.list = Object.keys(items).map(i => items[i]);
                console.log('this.list', this.list)`enter code here`;
            }
        })
    }

【讨论】：