Question

我的目标是创建一个投资组合页面，用户可以在其中填写表格（标题，技术，图像，文字等）来添加arworks。提交的数据将添加到数组中，并以列表形式显示。

我可以将阵列上传到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));
  }
}

Answer 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`;
            }
        })
    }

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

1 个答案: