Question

我在AngularFire 2上使用Ionic 2.我正在尝试在我的应用中添加消息功能。附加到用户的所有聊天都列在Firebase的/ user / user $ id / chats / node中。然后聊天的详细信息（如消息，......）位于/ chats / chat $ id / node。

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

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

*代码*

聊天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$);
  }

}

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

注意：您需要在data部分的.subscribe中的_localVar部分获取此值，例如_localVar。在html中，您可以使用{{_localVar[0].param}}。

此外，如果您确定在阵列中只获得1个值，请直接访问它：SELECT @rid,title,out('ExpertOf') AS expertises FROM (SELECT expand(in('ExpertOf')) FROM Page WHERE @rid=16:299) fetchplan *:0 expertises.rid:1 expertises.title:1 expertises:-2。

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

Answer 2

.map（array =＆gt; array [0]）并将其用作经典的Observable，使用异步管道呈现它

在没有* ngFor的情况下访问FirebaseListObservable的项目（在视图中）

2 个答案: