instalar - AngularFire2 regresando

firebase angular 5

Question

Estoy tratando de descubrir dónde ha ido todo mal. Todos mis observables devuelven [object Object].

Mi sunshine.component.html

<h4>Welcome {{username$}}</h4>
<ul>
<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote }}</li>
</ul>

Mi sunshine.component.ts

import { Component, OnInit, Injectable } from ''@angular/core'';
import { FormGroup, FormControl } from ''@angular/forms'';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from ''angularfire2'';

export class ProfileComponent implements OnInit {
  private addsnotes$: FirebaseListObservable<string[]>;
  private username$: FirebaseObjectObservable<string>;
  private profileshow = false;
  addForm: FormGroup;

  constructor(private af: AngularFire){
    this.addForm = new FormGroup({
      ''addnote'': new FormControl()
    });
  }

  ngOnInit(){
    let user = firebase.auth().currentUser,
    userNamePath = `users/${user.uid}/username`,
    notesPath = `users/${user.uid}/addnote`;
    this.username$ = this.af.database.object(userNamePath);
    this.addsnotes$ = this.af.database.list(notesPath);
  }

  addSubmit(){this.addsnotes$.push(''Billy Dee Williams'');}

}

Partes de mi base de datos de Firebase

{
  "users" : {
    "4twiyaFxVmaESXGWIfW4BwRXh893" : {
      "addnote" : {
        "-KSmWtpUSFXPCL4O3aKr" : "Do the dishes"
      },
      "useremail" : "[email protected]",
      "username" : "majic"
    },
    "PYuSE6zyAENdKREZGTHm5VH1DXn1" : {
      "addnote" : {
        "-KSoZM7sH6X5ahMq7S5y" : "Du the dishes",
        "-KSoZMimZzm6ZGQowmuL" : "Du the dishes",
        "-KSouEXkc1UkyISGTCHd" : "Du the dishes"
      },
      "useremail" : "[email protected]",
      "username" : "asdasd"
    }
  }
}

Una captura de pantalla de mi página (en aras de la claridad)

EDITAR He incluido un informe de mi proyecto en curso aquí, para brindarles a todos la mayor cantidad de información posible. Espero que sea útil.

https://github.com/emjayweb/demo

Los archivos respectivos se encuentran en src / app / profile / profile.component . Como esto es completamente WIP, no se preocupe por la logística del mismo (enrutamiento de vigilancia, validación, etc.).

La forma en que esto funciona es ingresar algunos datos ficticios en la página de inicio Crear cuenta, luego hacer clic en el enlace de Perfil en la navegación. Probablemente tengas que actualizar la página primero. Cuando haces clic en el botón en la ruta de perfil, ingresas "Billy Dee Williams" en tu matriz addnote , y la vista debe reflejar eso.

Answer 1

En el código siguiente, ''addsnote'' es una matriz de objetos.

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote }}</li>

Simplemente revisa el código a continuación.

<li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote[0] }}</li>

Entonces puedes entender cómo acceder a los datos.

Answer 2

Obtuve la respuesta de una pregunta diferente . Lo que tenía que hacer era agregar etiquetas $.value a mi HTML. En el caso de mi lista observable, habría sido:

 <li *ngFor="let addsnote of addsnotes$ | async">{{ addsnote.$value }}</li>

Y para mi objeto observable, habría sido:

<h4>Welcome {{ (username$ | async)?.$value }}</h4>