Angular 5中如何获取Observable<Details[]>的最后一个元素？

当然有办法啦！因为你手里的students是一个Observable<Details[]>，我们可以借助RxJS的操作符轻松提取数组里的最后一个对象，同时还能保持响应式特性（如果数据实时更新，最后一个元素也会自动同步）。

下面给你两种常用的实现方式：

方法一：在组件中用RxJS的map操作符转换Observable #

这种方式把逻辑放在组件（或服务）里，模板只负责展示，是更推荐的做法。

1. 首先确保导入RxJS的map操作符：

import { map } from 'rxjs/operators';

2. 在组件中创建一个新的Observable来存储最后一个学生对象：

// 假设你的students是从服务中获取的
lastStudent$: Observable<Details | undefined>;

constructor(private yourStudentService: YourStudentService) {
  // 对students Observable进行转换，提取最后一个元素
  this.lastStudent$ = this.yourStudentService.students.pipe(
    map(studentsArray => {
      // 先检查数组是否为空，避免出现索引越界的错误
      return studentsArray.length > 0 ? studentsArray[studentsArray.length - 1] : undefined;
    })
  );
}

3. 在模板中用async管道订阅并展示：

<!-- 只有当lastStudent$有值时才展示 -->
<div *ngIf="lastStudent$ | async as lastStudent">
  最后一个学生的信息：
  <pre>{{ lastStudent | json }}</pre>
</div>

方法二：直接在模板中处理（快速实现但不推荐复杂逻辑） #

如果只是简单展示，也可以直接在模板里通过async管道获取数组后取最后一个元素，但这种方式把逻辑放在模板里，不利于维护：

<!-- 先获取整个学生数组，再取最后一个 -->
<div *ngIf="students | async as studentsArray">
  <ng-container *ngIf="studentsArray.length > 0">
    最后一个学生：
    <pre>{{ studentsArray[studentsArray.length - 1] | json }}</pre>
  </ng-container>
  <ng-container *ngIf="studentsArray.length === 0">
    暂无学生数据
  </ng-container>
</div>

注意事项 #

• 一定要处理数组为空的情况，不然当数组长度为0时，studentsArray[studentsArray.length - 1]会返回undefined，可能导致模板报错。
• 因为是Observable，所以当你的Firebase集合数据更新时，最后一个元素也会自动更新，这完全符合Angularfire2的实时特性。

内容的提问来源于stack exchange，提问作者sahil_sinha