javascript - 将函数分配给 *ngFor 中的事件处理程序

Question

我正在 Angular 2 中制作一个上下文菜单组件，其中每个菜单项都调用它自己的函数，该函数由模型定义。我不知道如何将函数嵌入到模板中。我所拥有的一个例子如下。我的具体问题在这一行:

<li *ngFor="let item of items" (click)="{{item.click}}">{{item.name}}</li>

添加 onclick 处理程序时。我怎样才能做到这一点？

import {Component, ViewChild, ElementRef} from '@angular/core';

@Component({
  selector: 'app-context-menu',
  template: `<ul [hidden]="isHidden" #menu>
    <li *ngFor="let item of items" (click)="{{item.click}}">{{item.name}}</li>
  </ul>`
})
export class ContextMenuComponent {

    @ViewChild('menu') menu: ElementRef;
    private items: Object[];
    private isHidden: boolean = true;

    constructor() {
      this.items =  [
        {name: 'One', click: () => alert('One')},
        {name: 'Two', click: () => alert('2')},
        {name: 'Three', click: () => alert('3')},
        {name: 'Four', click: () => alert('4')}
      ];
    }

} 

Answer 1

模板中的语法应该是:

<li *ngFor="let item of items" (click)="item.click()">{{item.name}}</li>