如何点击循环生成的按钮将指定值传递至Angular 4控制器？

嘿，这事儿其实挺简单的，咱们直接上手改就行～

第一步：修改模板中的点击事件 #

你只需要把当前循环的techlist对象（或者你需要的特定属性）作为参数传给resList()方法，就能让控制器知道你点的是哪一个按钮对应的元素。

方案1：传递整个元素对象（推荐，后续扩展更灵活）

<div class="btn-group" role="group" aria-label="Basic example" *ngFor="let techlist of technology">
  <button type="button" class="btn btn-secondary" (click)="resList(techlist)">
    {{techlist.TechnologyRouteTitle}}
  </button>
</div>

方案2：传递单个特定属性（比如你提到的唯一TechnologyRouteKey）

<div class="btn-group" role="group" aria-label="Basic example" *ngFor="let techlist of technology">
  <button type="button" class="btn btn-secondary" (click)="resList(techlist.TechnologyRouteKey, techlist.TechnologyRouteId)">
    {{techlist.TechnologyRouteTitle}}
  </button>
</div>

第二步：在控制器中接收参数并处理 #

接下来要修改组件里的resList方法，让它能接收你传过来的参数：

对应方案1：接收整个元素对象

首先建议给technology数组定义明确的类型（提升代码可读性和IDE提示）：

// 先定义视图模型的接口
export interface TechnologyItem {
  ComponentTypeId: number;
  ComponentTypeTitle: string;
  TechnologyRouteId: number;
  TechnologyRouteKey: string; // 你提到的唯一标识
  TechnologyRouteTitle: string; // 模板中用到的标题字段
}

// 在组件中声明数组时指定类型
public technology: TechnologyItem[] = [];

然后修改resList方法：

resList(selectedTech: TechnologyItem) {
  // 现在你可以拿到选中元素的所有属性了
  console.log('选中的技术路线Key:', selectedTech.TechnologyRouteKey);
  console.log('组件类型ID:', selectedTech.ComponentTypeId);
  // 这里写你的业务逻辑，比如把值存到组件变量、调用后端接口等
}

对应方案2：接收单个属性

如果只传了特定属性，方法就改成对应参数的类型：

resList(routeKey: string, routeId: number) {
  console.log('选中的路线Key:', routeKey);
  console.log('选中的路线ID:', routeId);
  // 后续处理逻辑
}

原理说明 #

原来的resList()方法没有参数，Angular无法识别你点击的是循环列表中的哪一项。把当前循环的techlist（或它的属性）作为参数传入后，控制器就能精准获取到你点击的那个元素的对应值啦～

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