Angular 5中如何从Observer对象获取条目数量（关联ngFor长度问题）

嘿，我来帮你搞定这个问题！首先得明确一点：Observable是异步数据流，没法像同步数组那样直接拿length，得用响应式的方式处理才行。结合你提供的MyService代码（里面用到了BehaviorSubject，这是个关键点），我给你几个实用的方案：

方案一：组件内手动订阅获取数量 #

这种方式适合你需要在组件逻辑里用到这个数量的场景，比如做一些业务判断：

import { Component, OnInit } from '@angular/core';
import { MyService } from './services/my.service';
import { Feed } from './models/Feed';

@Component({
  selector: 'app-feed-list',
  templateUrl: './feed-list.component.html'
})
export class FeedListComponent implements OnInit {
  feeds: Feed[] = [];
  feedTotal: number = 0;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // 订阅feeds的数据流
    this.myService.feeds.subscribe((feedArray: Feed[]) => {
      this.feeds = feedArray;
      this.feedTotal = feedArray.length; // 这里就能拿到条目数量了
    });
  }
}

然后在模板里就可以直接用{{ feedTotal }}展示数量，ngFor遍历feeds数组就行。

方案二：用async管道在模板中直接处理（推荐） #

这种方式更符合Angular的响应式编程理念，而且Angular会自动帮你管理订阅的生命周期，避免内存泄漏：

<!-- 先用async管道解析Observable，把结果存到模板变量feedArray里 -->
<ng-container *ngIf="myService.feeds | async as feedArray">
  <p>当前共有 *{{ feedArray.length }}* 条Feed内容</p>
  <!-- 正常用ngFor遍历 -->
  <div class="feed-item" *ngFor="let feed of feedArray">
    {{ feed.title }}
  </div>
</ng-container>

这里的ng-container是个逻辑容器，不会渲染成真实DOM元素，很适合用来做这种条件判断和变量存储。

方案三：利用BehaviorSubject的同步取值（谨慎使用） #

因为你的MyService里导入了BehaviorSubject，如果feeds是BehaviorSubject实例的话，它有个getValue()方法可以同步获取当前的最新值，但一定要确保它已经发出过初始值，不然会报错：

// 在MyService里新增一个获取数量的方法
getFeedCount(): number {
  // 用可选链和默认值避免undefined报错
  return this.feeds.getValue()?.length || 0;
}

// 组件里调用
this.feedTotal = this.myService.getFeedCount();

这种方式只适合你确定数据流已经有值的场景，比如初始化时已经给BehaviorSubject设置了默认值，不然还是推荐前两种异步方式。

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