Question

我正在使用我的离子3应用程序中的ngx-pipes，因为我正在从firebase中提取物体对象。

我检索我的对象并将其转换为可在页面上使用的变量：

getEvents() {
    this.firebaseDatabase.getEvents.subscribe(data => {
        console.log("Events ", data);
        this.events = data;
    }, error => {
        console.log("Events ", error);
    });
}

我记录数据，它会像这样回来：

eventIDHashed_1:
    endDateTime:"tomorrow"
    location:"somewhere"
    roles:
        GyyapYhHQDOriruHLvGPKaTOiRp2:"admin"
    startDateTime:"today"
    title:"Arisss & Nathan"
    type:"wedding"
eventIDHashed_2:
    endDateTime:"tomorrow"
    location:"somewhere"
    roles:
        GyyapYhHQDOriruHLvGPKaTOiRp2:"admin"
    startDateTime:"today"
    title:"Jack & Marlana"
    type:"wedding"

我在页面上显示它的方式是一个临时解决方案，但除了第一行之外，一切正常。我需要获取事件名称（密钥），其中显示eventIDHashed_1和eventIDHashed_2

<div class="event-container">
    <div *ngFor="let event of events | values; let i = index">
        <span>{{events[i]}}</span>
        <span>{{event.title}}</span>
        <span>{{event.location}}</span>
        <span>{{event.type}}</span>
        <span *ngFor="let role of event.roles | pairs">
            <span>{{role[0]}}, {{role[1]}}</span>
        </span>
        <span>{{event.startDateTime}}</span>
        <span>{{event.endDateTime}}</span>
    </div>
</div>

我有一切正常，能够检索除实际事件ID <span>{{events[i] | keys}}</span>之外的所有信息。这为我提供了其中所有键的列表（endDateTime, location, title, startDateTime...），但我需要获取事件eventIDHashed_1和eventIDHashed_2

的ID

Answer 1

在使用ngx-pipes之后，我发现我可以非常简单地使用pairs运算符。我已经将模板从上面改为：

<div *ngFor="let event of events | pairs">
    <span>{{event[0]}}</span>
    <span>{{event[1].title}}</span>
    <span>{{event[1].location}}</span>
    <span>{{event[1].type}}</span>
    <span *ngFor="let role of event[1].roles | pairs">
        <span>{{role[0]}}, {{role[1]}}</span>
    </span>
    <span>{{event[1].startDateTime}}</span>
    <span>{{event[1].endDateTime}}</span>
</div>

ngx-pairs给出了event

的关键（位置[0]）和值（位置[1]）

Angular 4 * ngFor，ngx-pipes获得顶级密钥

1 个答案: