如何在Angular的ngFor循环中为click函数传参？分页场景遇报错

嘿，这个报错我太熟了！你遇到的是Angular模板开发里的典型误区——绝对不能在事件绑定的括号里用插值表达式{{}}，这就是控制台报“Got interpolation ({{}}) where expression was expected”的核心原因。

错误原因拆解 #

Angular的事件绑定（比如(click)这种）内部需要的是一个可执行的表达式，而{{}}是专门用来把数据渲染到视图文本中的语法。你把{{pageLink.pageNumber}}塞进togglePage()的参数里，相当于让Angular解析一段无效的混合语法，自然就报错了。

正确写法示例 #

假设你原来的HTML错误代码是这样的：

<!-- ❌ 错误写法：事件绑定里用了插值表达式 -->
<button (click)="togglePage({{pageLink.pageNumber}})">第 {{pageLink.pageNumber}} 页</button>

只需要去掉参数里的{{}}，直接传入变量即可：

<!-- ✅ 正确写法：事件绑定里直接用变量表达式 -->
<button (click)="togglePage(pageLink.pageNumber)">第 {{pageLink.pageNumber}} 页</button>

如果你的分页链接是通过*ngFor循环生成的，完整的模板代码应该类似这样：

<div class="pagination">
  <button *ngFor="let link of pageLinks" 
          (click)="togglePage(link.pageNumber)"
          [class.active]="currentPage === link.pageNumber">
    {{link.pageNumber}}
  </button>
</div>

控制器对应代码配合 #

确保你的控制器里的togglePage函数能正确接收页码参数：

// 控制器.ts文件
import { Component } from '@angular/core';
import { PageLink } from './models'; // 导入你的PageLink模型

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html'
})
export class PaginationComponent {
  currentPage = 1;
  pageLinks: PageLink[] = []; // 假设这是你生成的分页链接数组

  // 初始化分页数据（示例）
  ngOnInit() {
    // 这里生成你的PageLink对象数组
    this.pageLinks = [
      { pageNumber: 1, url: '#' },
      { pageNumber: 2, url: '#' },
      { pageNumber: 3, url: '#' }
    ];
  }

  togglePage(pageNumber: number) {
    this.currentPage = pageNumber;
    // 这里添加你的分页逻辑：比如请求对应页码的数据
    console.log(`切换到第${pageNumber}页`);
  }
}

关键总结 #

记住两个核心区分：

• 文本渲染：用{{变量}}把数据显示在页面上
• 事件/属性绑定：直接写变量或表达式，不需要{{}}

这样调整后，你的分页传参就能正常工作啦！

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