访问 FirebaseListObservable 中的项目，而无需 *ngFor(在视图中)

Question

我正在使用Ionic 2和AngularFire 2。我正在尝试在我的应用程序中添加消息传递功能。 附加到用户的所有聊天都列在 Firebase 的/user/user$id/chats/节点中。然后聊天的详细信息(如消息等)位于/chats/chat$id/节点中。

1. 我使用 FirebaseListObservable 检索聊天列表，并将聊天 ID 传递给名为聊天预览的自定义组件
2. 聊天预览的目的是显示最后一条消息的预览，它的时间和发件人;所以chat-preview对/chats/chat$id/messages/节点进行FirebaseListObservable调用，并按时间戳排序查询它，并限制为一个结果(第一个或最后一个)。
3. 我得到一个只有一个项目的数组，但我不想使用 *ngFor 指令来显示它，我知道只会有一条记录......

如何直接从我的视图访问它？

*法典*

chat-preview.component.ts

@Component({
selector: 'chat-preview',
templateUrl: './chat-preview.component.html'
})
export class ChatPreviewComponent implements OnInit {
@Input()
chatId: string;
lastMessage$: FirebaseListObservable<any>;
recipient$: FirebaseListObservable<any>;
constructor(public navCtrl: NavController, public messageService: MessageService, public userService: UserService) {
console.log('ChatPreviewComponent constructor');
}
ngOnInit(): void {
console.log('Building chat preview for chat ', this.chatId);
this.lastMessage$ = this.messageService.getLastMessage(this.chatId);
console.log('last mess: ', this.lastMessage$);
}
}

chat-preview.comoponent.html

<ion-item>
<ion-avatar item-left>
<img src="img/avatar-cher.png">
</ion-avatar>
<h2>{{chatId}}</h2>
<p>{{ (lastMessage$ | async)?.content }}</p>
<!-- prop content of a message is the body of the message -->
<!-- it looks like it doesn't work because lastMessage$ is actually a list of type FirebaseListObservable -->
</ion-item>

Answer 1

正如您所说，this.messageService.getLastMessage(this.chatId)返回FirebaseListObservable，则无法直接访问它。

您需要订阅此可观察量，如下所示：

this.messageService.getLastMessage(this.chatId).
.subscribe((data) => {
console.log("Data :",data)
this._localVar = data;
},(err) => {
console.log("Error :",err);
});

注意：您需要在某个本地变量(如_localVar).subscribe部分中data获取此值。在 html 中，您可以从_localVar.

另外，如果您确定在数组中只会获得 1 个值，请直接访问它，例如 ：{{_localVar[0].param}}.

查看 Github 上的这些示例 1 和 2 以获得更多理解。

Answer 2

.map(array => array[0]) 并将其用作经典的 Observable，使用异步管道渲染它