如何在Angular中访问此信息？

Question

我无法访问该对象中的信息

ts文件

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

 }

和html文件：

<p> {{message | async | json}} </p>

但是我在HTML页面中得到了这个

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

我想一个个地访问它们。我喜欢访问的任何内容。

Answer 1

您可以使用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>

---

运行代码段：-

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

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

Answer 2

注意：请澄清您的问题要求。您是否在询问如何一次访问所有数据？或者，您是否在问如何仅访问一个财产？下面的解决方案正在回答前面的问题（又称为如何一次访问messages属性中的所有数据？。）

---

那是因为您使用的AngularFireDatabase#object方法仅返回一个对象。

您正在寻找的是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();
  }
}