如何在ngFor循环中为Angular click函数添加参数

Question

这看似简单但不起作用。我正在为一系列事情做分页。我有一个分页对象，定义如下：

在我的models.ts中：

export interface PageLink {
    displayText: string;
    pageNumber: number;
    status: string;
}

在我的控制器中：

pageLinks: Array<PageLink>;

在我的HTML中：

<a *ngFor="let link of pageLinks" (click)="togglePage('test')" class="{{link.status}}">{{link.displayText}}</a>

这一切都没有爆炸，但我的愿望是将PageLink对象的pageNumber参数放在togglePage（）函数中。但是这样做：

<a *ngFor="let link of pageLinks" (click)="togglePage('{{link.pageNumber}}')" class="{{link.status}}">{{link.displayText}}</a>

爆炸。当我这样做时，我的控制台中出现了很多错误，但错误的要点是：

插值（{{}}）表达式是预期的

为什么会发生这种情况，我该如何避免呢？

注意：这是Angular 5

Answer 1

无需使用插值。无论您将哪些内容传递给内部事件属性，它都将直接评估组件上下文。 pageNumber的值将直接传递给togglePage函数。

(click)="togglePage(link.pageNumber)"

Answer 2

这样可行。不需要使用插值

  <a *ngFor="let link of pageLinks" 
(click)="togglePage(link.pageNumber)" class="{{link.status}}">{{link.displayText}}</a>