Angular中ngFor循环内如何为不同参数的方法传递对应参数

首先需要修正模板里的变量冲突：原代码中循环变量是btn，同时按钮的模板引用变量也是#btn，这会导致调用方法时获取到的是按钮元素而非循环的按钮对象，需把模板引用变量改成#btnElement。

方案一：用箭头函数封装点击逻辑（最灵活） #

直接在按钮数组中定义onClick箭头函数，封装好要调用的组件方法及对应参数，同时自动绑定组件的this上下文，避免方法调用时this指向错误。

组件代码修改：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  PrintFour() {
    console.log("four");
  }
  PrintThree() {
    console.log("three");
  }
  PrintTwo() {
    console.log("two");
  }
  PrintHello(data?: string) {
    console.log("hello is printed");
    if (data)
      console.log(data);
  }

  printParamert1(btn: HTMLButtonElement) {
    btn.innerHTML = "1 is clicked";
  }

  printParamert2(btn: HTMLButtonElement) {
    btn.innerHTML = "2 is clicked";
  }

  btns: Array<any> = [
    { 
      name: "one", 
      title: "one", 
      onClick: (btn: HTMLButtonElement) => this.PrintHello("hello"), 
      class: "btn-success"
    },
    { 
      name: "two", 
      title: "two", 
      onClick: () => this.PrintTwo(), 
      class: "btn-danger"
    },
    { 
      name: "three", 
      title: "three", 
      onClick: () => this.PrintThree(), 
      class: "btn-info"
    },
    { 
      name: "four", 
      title: "four", 
      onClick: () => this.PrintFour(), 
      class: "btn-secondary"
    },
    { 
      name: "five", 
      title: "five", 
      onClick: (btn: HTMLButtonElement) => this.printParamert1(btn), 
      class: "btn-secondary"
    },
    { 
      name: "six", 
      title: "six", 
      onClick: (btn: HTMLButtonElement) => this.printParamert2(btn), 
      class: "btn-secondary"
    },
  ];
}

模板代码修改：

<ng-container *ngFor="let btn of btns">
  <button class="btn me-4 {{btn.class}}" [title]="btn.title" #btnElement (click)="btn.onClick(btnElement)">
    {{btn.name}}
  </button>
</ng-container>

方案二：给按钮对象添加参数数组（适合参数固定场景） #

如果希望保持方法与参数分离，可以在按钮对象中添加params字段存储静态参数，同时用bind绑定方法的this上下文。

组件代码修改：

btns: Array<any> = [
  { 
    name: "one", 
    title: "one", 
    functionToCall: this.PrintHello.bind(this), 
    class: "btn-success",
    params: ["hello"]
  },
  { 
    name: "two", 
    title: "two", 
    functionToCall: this.PrintTwo.bind(this), 
    class: "btn-danger",
    params: []
  },
  { 
    name: "five", 
    title: "five", 
    functionToCall: this.printParamert1.bind(this), 
    class: "btn-secondary",
    params: []
  },
];

模板代码修改：

<ng-container *ngFor="let btn of btns">
  <button class="btn me-4 {{btn.class}}" [title]="btn.title" #btnElement (click)="btn.functionToCall(...btn.params, btnElement)">
    {{btn.name}}
  </button>
</ng-container>

注意：这种方式需要确保参数顺序匹配方法定义，比如需要按钮元素的方法要把btnElement放在对应参数位置。

关键注意点 #

• 避免this指向错误：直接传递组件方法时，方法的this会指向按钮对象而非组件实例，必须用bind(this)或箭头函数绑定上下文。
• 模板变量冲突：循环变量与模板引用变量不能同名，否则会导致变量引用错误。

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