Angular 10基于多选选项条件渲染div的实现问题

这个报错的核心原因是模板渲染时pharmacyOptions或绑定的多选值数组处于undefined状态——哪怕你后续异步赋值成功，初始渲染阶段变量还没初始化，调用includes就会触发类型错误。下面给你具体的修复步骤和实现方案：

1. 给数组变量做初始化 #

组件类里必须把pharmacyOptions和多选绑定的变量（比如selectedPharmacies）初始化为空数组，不能让它们默认是undefined：

// 组件.ts文件
export class YourComponent {
  // 选项数组初始化
  pharmacyOptions: string[] = [];
  // 多选绑定的选中值数组，必须初始化为空数组
  selectedPharmacies: string[] = [];

  ngOnInit() {
    // 模拟异步获取选项数据（比如接口请求）
    this.getPharmacyOptions().then(options => {
      this.pharmacyOptions = options;
    });
  }

  // 模拟接口请求
  getPharmacyOptions(): Promise<string[]> {
    return Promise.resolve(['门诊药房', '住院药房', '急诊药房']);
  }
}

2. 模板里做安全判断或用可选链 #

模板中调用includes前，要么用*ngIf先确保数组存在，要么用可选链操作符?.避免undefined报错：

方式一：用*ngIf先判断数组存在 #

<!-- 多选列表 -->
<select multiple [(ngModel)]="selectedPharmacies">
  <option *ngFor="let option of pharmacyOptions" [value]="option">{{option}}</option>
</select>

<!-- 条件渲染子组件/列表：先判断selectedPharmacies存在，再判断是否包含指定值 -->
<div *ngIf="selectedPharmacies && selectedPharmacies.includes('门诊药房')">
  选中门诊药房时显示的子选择列表
</div>

<div *ngIf="selectedPharmacies && selectedPharmacies.includes('住院药房')">
  选中住院药房时显示的子单选组
</div>

方式二：用可选链操作符?.（Angular 10支持，对应TS3.7+） #

可选链会在数组为undefined时直接返回undefined，不会触发报错：

<div *ngIf="selectedPharmacies?.includes('急诊药房')">
  选中急诊药房时显示的内容
</div>

3. 多选绑定的关键细节 #

• 多选的select标签必须加multiple属性
• 绑定的ngModel必须是数组类型，不能是单个值——这是单选改多选最容易踩的坑

按照上面的步骤调整后，就能解决includes报错的问题，同时实现基于多选选项的条件渲染。

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