AngularFire CRUD

Question

Witam. Probuje zburodwac CRUD do AngularFire. Plik items-list.component.ts:

import {Component, OnInit} from '@angular/core';
import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated';
import {Item} from '../shared/item';
import {ItemService} from '../shared/item.service';

@Component({
  selector: 'app-items-list',
  templateUrl: './items-list.component.html',
  styleUrls: ['./items-list.component.scss']
})
export class ItemsListComponent implements OnInit {

  public items: FirebaseListObservable<any[]>;

  constructor(public itemSvc: ItemService) {
  }

  ngOnInit() {
    this.items = this.itemSvc.getItemsList({limitToLast: 10});
  }

  deleteItems() {
    this.itemSvc.deleteAll();
  }
}

// export class ItemsListComponent {
// }

Plik items-list.component.html:

<div *ngFor="let item of items | async">
  <app-item-detail [item]='item'></app-item-detail>
</div>
<!--<button (click)='deleteItems()'>Delete Entire List</button>-->

Plik item.service.ts:

import {Injectable} from '@angular/core';
import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated';
import {Item} from './item';

@Injectable()
export class ItemService {

  private basePath: '/items';

  items: FirebaseListObservable<any[]> = null; //  list of objects
  item: FirebaseObjectObservable<any> = null; //   single object

  constructor(private db: AngularFireDatabase) {
  }

  getItemsList(query = {}): FirebaseListObservable<any[]> {
    this.items = this.db.list(this.basePath, {
      query: query
    });
    return this.items;
  }

  // Return a single observable item
  getItem(key: string): FirebaseObjectObservable<Item> {
    const itemPath = `${this.basePath}/${key}`;
    this.item = this.db.object(itemPath);
    return this.item;
  }

  createItem(item: Item): void {
    this.items.push(item);
    // .catch(error => this.handleError(error));
  }


  // Update an existing item
  updateItem(key: string, value: any): void {
    this.items.update(key, value)
      .catch(error => this.handleError(error));
  }

  // Deletes a single item
  deleteItem(key: string): void {
    this.items.remove(key)
      .catch(error => this.handleError(error));
  }

  // Deletes the entire list of items
  deleteAll(): void {
    this.items.remove()
      .catch(error => this.handleError(error));
  }

  // Default error handling for all actions
  private handleError(error) {
    console.log(error);
  }
}

Wiec tak. Na razie usiluje wypisac po prostu 10 elementow z bazy. Niestety Angular wywala blad: ERROR Error: "[object Object]". Swietny blad swoja droga.

Blad jest wyrzucany w momencie deklarowania konstruktora w items-list.compoment.ts. Wykomentowywalem kod az doszedlem do tego. Ale nie mam pojecia co jeszcze moze isc nie tak. Jakies pomysly?

Answer 1

private basePath: '/items';

Ogólnie to nie ma sensu w twoim przypadku :)

 

Ogólnie te zapytania do bazy nie są asynchroniczne? Jeśli tak to masz następny babol związany z pobieraniem / wysyłaniem danych.

Comments

Szczerze to dalem sobie spokoj z Angularem. I tak go nie pojmuje. Sprobuje ogarnac podstawy Reacta i podejsc od tej strony

---

Hmm.. ale czemu? Po prostu źle zainicjowałeś zmienną w typescript :)
Ogólnie asynchroniczność to nie jest problem związany z angularem a raczej z językiem Javascript.
* nie jest to problem - asynchroniczność ratuje pupę

---

Nie podoba mi sie Angular. Moduly sa zmieniane co wersje, kazdy tutorial jest po 2 mcach przestarzaly... Od poczatku to byla droga przez meke. Sprobuje React. Wydaje sie bardziej pode mnie

---

Yyy.. czemu? Przecież jedna wielka zmiana tak naprawdę była tylko pomiędzy 2 a 4. Każdy tutorial zaczynający się od wersji 4 jest "na topie", bo zmiany tak naprawdę w nowych wersjach są w "podziemiach kodu".
Może po prostu nie rozumiesz typescripta i przez to uważasz całego angulara za zło konieczne :)

---

Wiesz. Robilem kurs Angulara z roku 2017. Okazalo sie ze jakis modol pozmianial sciezki do importow 3 razy. I trzeba szukac na StackOverflow, w changelogach itd. Poza tymi modulami do Angulara nic nie mam.

---

Yyy.. jaki moduł? Z tego co pamiętam dodali moduł HttpClient oraz BrowserAnimation, nic innego raczej nie zmieniali

---

W AngularFire. Sporo tego pozmianiali w pare mcy z tego co widzialem

---

Ale to już nie powinieneś mieć problemu do samego angulara. Przecież oni nie mają wpływu na wersje "trzecich-modułów".

---

Wiem wiem. Ale irytacja zostaje. Po prostu jakos mi nie podchodzi.

---

Spoko :)