Назначение функций обработчикам событий в * 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>