Angular Material选择列表：字符串改Observable时报错如何解决？

你遇到的错误核心原因是：Observable<Events[]>是异步数据流容器，并非数组本身，所以它没有length属性。必须先获取到Observable内部发出的Events[]数组，才能访问其长度。

以下是两种场景下的具体解决方法：

一、在组件类逻辑中获取数组长度 #

如果需要在组件代码里使用数组长度，通过订阅Observable获取内部数组，同时要注意取消订阅防止内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 假设你的Events接口定义如下
interface Events {
  id: number;
  name: string;
}

@Component({
  selector: 'app-list-selection',
  templateUrl: './list-selection-example.html',
})
export class ListSelectionExample implements OnInit, OnDestroy {
  typesOfShoes: Observable<Events[]>;
  // 用于统一取消订阅的Subject
  private destroy$ = new Subject<void>();
  // 存储数组长度
  eventListLength = 0;

  ngOnInit(): void {
    // 订阅Observable，拿到内部数组后赋值长度
    this.typesOfShoes.pipe(takeUntil(this.destroy$)).subscribe((eventsArray) => {
      this.eventListLength = eventsArray.length;
      // 这里可以执行依赖数组长度的业务逻辑
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消所有订阅，避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

二、在模板中直接使用数组长度 #

利用Angular的async管道自动处理Observable的订阅与取消订阅，直接在模板中访问数组长度：

方式1：直接通过async管道访问 #

用?.操作符避免数组未加载时的空值报错：

<p>事件总数：{{ (typesOfShoes | async)?.length }}</p>

<mat-selection-list [multiple]="false">
  <mat-list-option *ngFor="let event of typesOfShoes | async">
    {{ event.name }}
  </mat-list-option>
</mat-selection-list>

方式2：用模板变量缓存订阅结果（推荐） #

多次使用async会触发多次Observable订阅，用*ngIf结合模板变量缓存数组结果，避免重复订阅：

<ng-container *ngIf="typesOfShoes | async as events">
  <p>事件总数：{{ events.length }}</p>

  <mat-selection-list [multiple]="false">
    <mat-list-option *ngFor="let event of events">
      {{ event.name }}
    </mat-list-option>
  </mat-selection-list>
</ng-container>

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