Angular 访问FirebaseListObservable中不带*ngFor的项目（视图中）

我使用离子2和AngularFire 2。我正在尝试在我的应用程序中添加消息功能。 连接到用户的所有聊天记录都列在Firebase中的/user/user$id/chats/节点中。然后在/chats/chat$id/节点中显示聊天的详细信息（如消息等）

我使用FirebaseListObservable检索聊天列表，并将聊天id传递给名为chat preview的自定义组件

聊天预览的目的是显示最后一条消息、时间和发件人的预览；因此，chat preview对/chats/chat$id/messages/节点进行FirebaseListObservable调用，并按时间戳顺序查询它，并限制为一个结果（第一个或最后一个）

我得到一个只有一个项目的数组，但我不想使用*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$);
  }

}

@组件({
选择器：“聊天预览”，
templateUrl:“./chat preview.component.html”
})
导出类ChatPreviewComponent实现OnInit{
@输入（）
chatId：字符串；
lastMessage$：FirebaseListObservable；
收件人$：FirebaseListObservable；
构造函数（公共navCtrl:NavController，公共messageService:messageService，公共userService:userService）{
log（'ChatPreviewComponent构造函数'）；
}
ngOnInit（）：void{
console.log（'Building chat preview for chat'，this.chatId）；
this.lastMessage$=this.messageService.getLastMessage（this.chatId）；
log（'last mess:'，this.lastMessage$）；
}
}

chat-preview.com组件.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>

{{chatId}}
{{（lastMessage$| async）？.content}

正如您所说，

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);
});

注意：您需要在

中的
数据
中获取此值。在一些本地变量（如
\u localVar
）中订阅
部分。在html中，您可以从
\u localVar
使用它

另外，如果您确定在一个数组中只获取1个值，请直接访问它，如：
{{{{u localVar[0].param}

查看这些示例并在Github上了解更多信息。
.map（array=>array[0]）并将其用作经典的可观察对象，使用异步管道渲染它
我可以使用异步管道从视图中直接访问它，其结果与订阅并将其传递给变量相同。我可以这样重新表述我的问题：如何从视图中访问FirebaseListObservable的某个索引？将异步管道与数组访问器[]相结合实际上，我不知道答案。可能需要一些时间才能找到答案，因为我还没有试过。但是，书面回答可以给出您所寻找的确切行为。如果您仍然想使用异步管道回答问题，请告诉我。您的答案确实有效，谢谢您的回答。我决定使用
.map（array=>array[0]）
并将其作为一个经典的可观察对象，使用异步pipeNice进行渲染。学得好。使用
.map（数组=>array[0]）
。事实上我知道这一点。“当时没有思考过。@ManuelRODRIGUEZ:如果这个问题行得通，你能结束它吗？”？