如何在 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>

---

运行代码sn-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();
  }
}