2017-10-07 1 views
0

Je sais que cela semble un problème très simple mais je suis coincé au point et besoin d'aide. Essayez de créer un site Web en utilisant angulaire 2 - J'ai les données que je peux voir dans le journal de la console, mais quand j'essaie d'aller chercher sur la page HTML - Rien ne vient.Je ne suis pas en mesure d'extraire des données de l'Array en utilisant ngFor -Ne suis pas sûr de ce qui ne va pas

C'est ma page users.component.html

import { Component, OnInit } from '@angular/core'; 
import{FirebaseService} from '../../services/firebase.service'; 

@Component({ 
    selector: 'app-users', 
    templateUrl: './users.component.html', 
    styleUrls: ['./users.component.css'] 
}) 
export class UsersComponent implements OnInit { 

users:any; 

    constructor(private firebaseservice:FirebaseService) { } 

    ngOnInit() { 
    this.firebaseservice.getusers().subscribe(users=>{ 
     this.users=users; 
     console.log(users); 

    }); 
    } 

} 

Data Image

Ceci est mon users.component.html Page

<ul class="list-group"> 
    <li class="list-group-item" *ngFor="let user of users"> 
    {{user.title}} 
    </li> 
    </ul> 

Could not see any Data in Screen

+0

Est-ce que 'user' a une propriété' title'? Je ne peux pas le voir sur les images fournies –

+0

oui il a: Kdl_wRRkn7nJxgz4B54 : chambres : ville : "San Francisco" l'image : "mansion1.jpg" propriétaire : « Bruce Springstien "chemin : "/img/mansion1.jpg" prix : "10 m" titre : "15 Chambre Mansion" Type : "Estate" –

+0

Je ne suis pas sûr, mais essayez de rendre votre 'users: any;' public, comme ceci: 'public users: any;' –

Répondre

0

Pour autant que je peut voir que vous avez un tableau qui contient un objet avec votre résultats. ng-for nécessite des données itératives (Array) ce qui n'est pas le cas dans votre résultat.

Vous devez parcourir vos objets et pousser chaque objet de votre tableau d'utilisateurs. Vous pouvez utiliser pour ... pour y parvenir

var result = {}; 
result.a = {name: 'test'}; 
result.b = {name: 'test2'}; 

var users = []; 

for (let user in result) { 
    users.push(result[user]); 
} 

Ensuite, votre tableau d'utilisateurs devrait être itérable.

Dans votre code ce devrait être comme:

ngOnInit() { 
    this.firebaseservice.getusers().subscribe(users=>{ 
     for (let user in users) { 
      this.users.push(users[user]); 
     } 
    });