Question

我是Angular2与Firebase集成的新手，所以请原谅我的天真。

我使用AngularFire2插件连接我的Firebase数据库，并且一直关注他们的GitHub文档。

到目前为止，当我检索FirebaseObjectObservable时，我会使用文档中描述的async管道在我的HTML中显示它：

要实时获取对象，请创建对象绑定作为组件或服务的属性。然后在模板中，您可以使用异步管道来解包绑定。

HTML ：

<ion-list *ngFor="let member of _tripMembers">
    <ion-item>
        <ion-avatar item-left>
            <img src="{{ (member | async)?.photoUrl }}">
        </ion-avatar>
        <ion-label>{{ (member | async)?.firstName }} {{ (member | async)?.lastName }}</ion-label>
        <ion-checkbox color="positive" [(ngModel)]="member.checked" (click)="toggleClicked(member, !member.checked)" item-right></ion-checkbox>
    </ion-item>
</ion-list>

单击toggleClicked时调用ion-checkbox函数时，我要传入的第一个参数是成员的键而不是完整成员（如图所示））。这在文档中的here中描述为仅使用member.$key但返回undefined。

我可以使用async管道再次显示密钥：
(member | async).$key

但是，我不能在参数清单中这样做，因为你不能在那里找到管道。

修改

_tripMembers只是一个包含FirebaseObjectObservable的基本JS数组。由于member是firebase中的单个项目，我认为它将是FirebaseObjectObservable而不是FirebaseListObservable。文档中的示例是，如果您获得 LIST 项，则使用FirebaseListObservable。如果您只获取单个项目（这就是我正在做的事情），您将使用FirebaseObjectObservable，

getUserWithID(userID): FirebaseObjectObservable<any> {
    return this.af.database.object('users/' + userID);
}

setTripMembers(): void {
    allUsers.forEach((user) => {
        tripMembersID.forEach((member) => {
            if (user.$key === member) {
                tripMembers.push(getUserWithID(user.$key));
            }
        });
    });


    let modal = this.modalCtrl.create(LocationModal, {
        name: name,
        members: tripMembers
    });
}

这是错的吗？是否应该将单个项目设为FirebaseListObservable？如果是的话，那么有人可以解释一下我们会使用FirebaseObjectObservable的情况，因为我觉得文档不能很好地解释它。

或者_tripMembers必须是FirebaseListObservable<FirebaseObjectObservable>吗？

Answer 1

不要在任何地方使用异步。只需在你的收藏中的ngFor中使用它。

<ion-list *ngFor="let member of _tripMembers | async">

修改

你想要打开＆＃34;打开＆＃34;代码端的可观察量在它们进入模板之前，并且没有传递它们或将它们推入到阵列中。

Take a look at this comment which helped me out when starting with AngularFire

this.af.database.object('path')意味着消费＆amp;由模板自动解包。要在代码端获取数据，您需要订阅它。但只是订阅会让观察者处于现场状态。使用take运算符获取数据并关闭observable。

FirebaseObjectObservable＆amp; FirebaseListObservable是将数据显示在模板中的简单方法。但是一旦你开始操作它们，你需要在Observables上做更多的工作来创建POJO / Arrays，它最终会成为你视图的模型。

它可能最终看起来像：

let membersArray = []; // your forEach this.af.database.object(`path/to/${member}`) .take(1) .subscribe(member => { console.log(`member`, member); membersArray.push(member); }); // end of forEach

将FirebaseObjectObservable的$ key传递给函数

1 个答案: