Angular：*ngFor或*ngIf内使用插值与动态变量的实现求助

嘿，我完全懂你遇到的困扰——想在*ngFor里用动态拼接的变量名来指向组件里的集合，对吧？你说的操作确实可行，只是Angular的模板语法不支持像你写的*ngFor="let option of 'option_'{{dynamic_var}}"这种直接插值的写法，得换个方式来实现。

下面给你两种最常用的解决方案：

方案一：把动态集合放到对象中，用键访问 #

如果你的option_*系列集合可以整理成一个对象的属性，这是最简洁的方式：

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 动态变量，比如从接口、用户操作获取
  dynamic_var = '1';

  // 把所有option集合放到一个对象里
  optionGroups = {
    option_1: ['选项A', '选项B', '选项C'],
    option_2: ['选项X', '选项Y', '选项Z'],
    option_3: ['选项P', '选项Q']
  };
}

模板代码 #

<!-- 用字符串拼接生成键，通过对象括号表示法访问对应集合 -->
<div *ngFor="let option of optionGroups['option_' + dynamic_var]">
  {{ option }}
</div>

方案二：直接访问组件类属性（用方法/getter） #

如果你的option_*是直接定义在组件类里的独立属性，那可以写一个方法或者getter来动态返回对应的集合：

组件代码（用getter更推荐，性能更优） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  dynamic_var = '2';

  // 独立的option属性
  option_1 = ['选项A', '选项B', '选项C'];
  option_2 = ['选项X', '选项Y', '选项Z'];
  option_3 = ['选项P', '选项Q'];

  // 用getter动态返回目标集合
  get currentOptions() {
    // 用this['属性名']的方式访问组件类的动态属性
    return this['option_' + this.dynamic_var];
  }
}

模板代码 #

<!-- 直接绑定getter返回的集合 -->
<div *ngFor="let option of currentOptions">
  {{ option }}
</div>

额外注意事项 #

• 要确保拼接后的属性名确实存在，不然会遍历undefined导致报错。可以加个*ngIf先判断：

  <div *ngIf="currentOptions" *ngFor="let option of currentOptions">
    {{ option }}
  </div>
  

• 或者用可选链操作符（Angular支持）来避免报错：

  <div *ngFor="let option of currentOptions?.slice(0)">
    {{ option }}
  </div>
  

核心思路就是：Angular模板表达式里可以直接使用JavaScript的属性访问语法，不需要用模板插值{{}}来拼接字符串——把拼接逻辑放到表达式里就行啦！

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