Question

我想以表格格式收集地址表中的元素，但无法完成。这就是我在控制台中得到的内容

{…}

"-LsMm5EeM0DavWwNweBc": Object { adresse: "njkbj", commune: "Marcory", nom: "jjbjkb,", … }

"-LsMmBCOHZzkVL_LUwiQ": Object { adresse: "bjb", commune: "Marcory", nom: "bjhbhjh", … }

<prototype>: Object { … }

服务页面

 adresses: Adresse [] = [];
  adresseSubject = new Subject<Adresse[]>();

  constructor() { }

  emitAdresse(){
    this.adresseSubject.next(this.adresses);
  }


  getAdresse(){
    firebase.database().ref('adresse/' + firebase.auth().currentUser.uid )
      .on('value', (data)=>{
        this.adresses = data.val() ? data.val() : [];
        console.log();
        this.emitAdresse();
      });
  }

第ts页的页面

adresses : Adresse[];
  adresseSubscription: Subscription;

  constructor(private adresseService: AdresseService,  private router: Router) {}

  ngOnInit(){
    this.adresseSubscription = this.adresseService.adresseSubject.subscribe(
      (adresses: Adresse[]) => {
        this.adresses = adresses;
      }
    );
    this.adresseService.getAdresse();
    this.adresseService.emitAdresse();
  }

谢谢

Answer 1

在页面组件中，adresses将是Object，而不是Array。因此，为了使此工作有效，您可以将keyvalue管道与*ngFor

一起使用

在这里，尝试一下：

<ul>
  <li *ngFor="let item of adresses | keyvalue">
    {{ item.adresse }}
  </li>
</ul>

Answer 2

您得到的是对象，而不是数组。因此，您可以选择使用keyvalue管道，就像在其他答案中一样（进行较小的修正），或者根据响应实际创建一个数组。

这里使用的是keyvalue：

<ul>
  <li *ngFor="let item of data | keyvalue">
    {{ item.value.adresse }}
  </li>
</ul>

或者，然后根据响应创建一个数组：

adressArray = [];

getAdresse(){
  firebase.database().ref('adresse/' + firebase.auth().currentUser.uid )
    .on('value', (data) => {
       for (let key in data.val()) {
         this.adressArray.push({key, ...data.val()[key]})
       }
    });
}

有了它，您将得到一个对象数组，每个对象看起来像：

{"key":"-LsMm5EeM0DavWwNweBc","adresse":"njkbj","commune":"Marcory","nom":"jjbjkb"}

然后您可以像这样迭代：

<ul>
  <li *ngFor="let item of adressArray">
    {{item.adresse}}
  </li>
</ul>

以下是带有两个选项的STACKBLITZ： DEMO

无法检索数组值

2 个答案: