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>

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

1 个答案: