Блог

Моя цель — создать страницу портфолио, где пользователь может добавлять работы, заполнив форму (название, техника, изображение, 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));
  }
}
  

Попробуйте этот код:

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