Angular 5中多下拉框选不同选项调用对应函数的实现问题

你遇到的问题核心在于activityList里的mtd字段存的是字符串形式的函数名称（比如"getActivity1()"），Angular无法直接将字符串当作可执行的函数来处理。下面给你两种可行的解决方案：

方案一：直接存储函数引用（推荐） #

把activityList里的mtd改成组件中函数的直接引用，而非字符串形式：

组件代码调整： #

export class YourComponent {
  // 先定义好你的自定义业务函数
  getActivity1() {
    console.log('执行cycling对应的逻辑');
    // 这里写你的业务代码
  }

  getActivity2() {
    console.log('执行其他活动对应的逻辑');
    // 这里写你的业务代码
  }

  // 将mtd设置为函数引用（注意不要加括号，加括号会导致函数立即执行）
  activityList = [
    { mtd: this.getActivity1, name: "cycling" },
    { mtd: this.getActivity2, name: "swimming" }
    // 其他活动选项...
  ];
}

HTML代码调整： #

此时opt.mtd是函数引用，需要添加括号来触发执行：

<li class="dropdown"> 
  <div id="name">Activities</div> 
  <li *ngFor="let opt of activityList"> 
    <a (click)="opt.mtd()">{{opt.name}}</a> 
  </li> 
</li>

方案二：通过函数名字符串间接调用 #

如果因特殊需求必须存储函数名字符串，可以写一个通用的调用方法来中转：

组件代码调整： #

export class YourComponent {
  getActivity1() {
    console.log('执行cycling对应的逻辑');
  }

  getActivity2() {
    console.log('执行其他活动对应的逻辑');
  }

  // mtd字段存储不带括号的函数名
  activityList = [
    { mtd: "getActivity1", name: "cycling" },
    { mtd: "getActivity2", name: "swimming" }
  ];

  // 通用调用函数，通过字符串查找并执行对应方法
  callMethod(methodName: string) {
    if (typeof this[methodName] === 'function') {
      this[methodName]();
    } else {
      console.warn(`方法${methodName}不存在，请检查函数名是否正确`);
    }
  }
}

HTML代码调整： #

<li class="dropdown"> 
  <div id="name">Activities</div> 
  <li *ngFor="let opt of activityList"> 
    <a (click)="callMethod(opt.mtd)">{{opt.name}}</a> 
  </li> 
</li>

另外注意你组件代码里的大小写问题：部分项写的是mtd，部分是Mtd，字段名要保持完全一致，否则会出现找不到属性的情况哦～

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