How do I access this information in Angular? [closed]

I can't access the information in this object

The ts file

import Component from '@angular/core';
import AngularFireDatabase, AngularFireObject from
'angularfire2/database'
import Observable from 'rxjs';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
)
export class AppComponent
title:AngularFireObject<any>;
message: Observable<any>;

constructor(private db: AngularFireDatabase)
this.title = db.object('message');
this.message = this.title.valueChanges();





and the html file:

<p> message </p>


But I got this in my HTML Page:


"-LKbddlCLBERGd6y4MD2":
"email": "rakiubl97@gmail.com",
"message": "sa",
"timeStand": "2018/8/23 16:38:12",
"username": "Rakibul"
,
... this repeats a similar object many times



I want to access them one by one. Whatever I like to access.

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

messages

messages

2 Answers
2

You can access the properties of the object using the for-in loop. You can push the contents of the object into an array and then run *ngFor over that array to access any property.

for-in

*ngFor

for (var key in message)
console.log('Email: ', message[key].email);

// push message[key] into an array
messages.push(message[key]);



HTML:-

<p *ngFor="let m of messages"> m.email </p>


Running code snippet:-

var message =
'lkdp':
email: 'email 1'
,
'lkdq':
email: 'email 2'
,


for (var key in message)
console.log('Email: ', message[key].email);


message

this.message

var

const

NOTE: Please clarify what you're asking for in your question. Are you asking on how to access all of the data at once? Or, are you asking on how to access only one property? The solution below is answering the former question (AKA How do I access all of the data in the messages property at once?).

messages

That's because you're using the AngularFireDatabase#object method which only returns an object.

AngularFireDatabase#object

What you're looking for is the AngularFireDatabase#list method:

AngularFireDatabase#list

import Component from '@angular/core';
import AngularFireDatabase, AngularFireList from 'angularfire2/database';
import Observable from 'rxjs';

@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
)
export class AppComponent
title: AngularFireObject<any>;
message: Observable<any>;

constructor(private db: AngularFireDatabase)
this.title = db.list('message');
this.message = this.title.valueChanges();