如何使用 AngularFire2 加入文档?
How to join documents with AngularFire2?
我有一个 Firebase 中另一个文档的 ID 列表,如下所示:
{
uid,
members: [0, 1, 3],
...
},
我目前加入的成员对象是这样的:
af.database.list('/threads')
.map((message) => {
message.members = message.members.map((memberID) => {
return af.database.object('/users/' + memberID);
});
});
有没有更简洁的方法来做到这一点?
一个想法是创建一个 ThreadComponent
,它将成员 ID 传递给处理成员数据的子 MemberComponent
。
threads.component.html
<div class="thread" *ngFor="let thread of threads$ | async">
<my-member *ngFor="let memberId of thread.members"
[memberId]="memberId"></my-member>
</div>
threads.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
@Component({
selector: 'my-thread',
templateUrl: 'thread.component.html',
// ...
})
export class MyThreadComponent implements OnInit {
threads$;
constructor (private af: AngularFire) {}
ngOnInit () {
this.threads$ = this.af.database.list('/threads');
}
}
member.component.html
<div>{{ memberInfo$ | async }}</div>
member.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
@Component({
selector: 'my-member',
templateUrl: 'member.component.html',
// ...
})
export class MyMemberComponent implements OnInit {
@Input() memberId;
memberInfo$;
constructor (private af: AngularFire) {}
ngOnInit () {
this.memberInfo$ = this.af.database.list(`/users/${memberId}`);
}
}
我在您当前的方法中看到的一个问题是,您可能正在改变从 angularfire 返回的可观察对象,这可能会导致不良影响。您可以创建一个不同的变量并将返回的成员 firebase observables 设置为该变量。
我有一个 Firebase 中另一个文档的 ID 列表,如下所示:
{
uid,
members: [0, 1, 3],
...
},
我目前加入的成员对象是这样的:
af.database.list('/threads')
.map((message) => {
message.members = message.members.map((memberID) => {
return af.database.object('/users/' + memberID);
});
});
有没有更简洁的方法来做到这一点?
一个想法是创建一个 ThreadComponent
,它将成员 ID 传递给处理成员数据的子 MemberComponent
。
threads.component.html
<div class="thread" *ngFor="let thread of threads$ | async">
<my-member *ngFor="let memberId of thread.members"
[memberId]="memberId"></my-member>
</div>
threads.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
@Component({
selector: 'my-thread',
templateUrl: 'thread.component.html',
// ...
})
export class MyThreadComponent implements OnInit {
threads$;
constructor (private af: AngularFire) {}
ngOnInit () {
this.threads$ = this.af.database.list('/threads');
}
}
member.component.html
<div>{{ memberInfo$ | async }}</div>
member.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
@Component({
selector: 'my-member',
templateUrl: 'member.component.html',
// ...
})
export class MyMemberComponent implements OnInit {
@Input() memberId;
memberInfo$;
constructor (private af: AngularFire) {}
ngOnInit () {
this.memberInfo$ = this.af.database.list(`/users/${memberId}`);
}
}
我在您当前的方法中看到的一个问题是,您可能正在改变从 angularfire 返回的可观察对象,这可能会导致不良影响。您可以创建一个不同的变量并将返回的成员 firebase observables 设置为该变量。