时间戳

首页 > 解决方案 > 从 Angular 模板中的 Observable 读取键和值？

angular - 从 Angular 模板中的 Observable 读取键和值？

问题描述

我一直在尝试显示 Angular Firebase Fire Store Collection 返回的 Observable 中的所有键和所有值。

这就是我连接到集合并返回 Observable 的方式。我稍后调用该函数。

verOrden : any;

blunt() {

this.afStore.collection(`Something`).valueChanges().subscribe(res => (this.verOrden = res));  

}

如果在模板中给出键，我可以完美地读取每个值：

<ion-card *ngFor = "let item of verOrden">

        <ion-card-content>

            {{item.descripcion}}

        </ion-card-content>

    </ion-card>

其中 description 是 observable 内部的关键。

但我想读取 observable 内部的所有值和键，而不需要我给出每一个。

我试过这个，但不起作用。

<ion-card *ngFor = "let item of verOrden | keyvalue">

        <ion-card-content>

            {{item.descripcion.key}}

        </ion-card-content>

    </ion-card>

我希望显示键和值。

标签： angulartypescriptionic-frameworkfirebase-realtime-databaseobservable

解决方案

keyvalue 返回具有key和value为 键的对象数组。所以你item的循环有 shape { key: ___, value: ___ }。但是您正在尝试访问.description.

您可以使用json管道快速检查结构：

<ion-card *ngFor = "let item of verOrden | keyvalue">
    <ion-card-content>
        {{ item | json }}
    </ion-card-content>
</ion-card>

你想要的可能是这样的：

<ion-card *ngFor = "let item of verOrden | keyvalue">
    <ion-card-content>
        {{ item.key.descripcion }}
    </ion-card-content>
</ion-card>

推荐阅读