从 Angular 模板中的 Observable 读取键和值？答案

【问题标题】：Read keys and values from Observable in Angular Template?从 Angular 模板中的 Observable 读取键和值？
【发布时间】：2020-08-20 09:02:02
【问题描述】：

我一直在尝试显示 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>

我希望显示键和值。

【问题讨论】：

标签： angular typescript ionic-framework firebase-realtime-database observable

【解决方案1】：

keyvaluereturns an array of objects that have key and value for keys。所以你在循环中的item 的形状是{ key: ___, value: ___ }。但是您正在尝试访问.description。

你可以快速查看结构by using the json pipe：

<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>

【讨论】：

我差点放弃了，谢谢你！ .description，我在发布问题时很糟糕。我只是做了一点改变，实际上我使用 {{ item.value | json }} 得到我想要的。再次谢谢你！