ngFor 和(点击)在 Ionic 2 和 Angular 2 中不起作用

Question

当循环访问ngFor的项目数组时，(click(事件无法附加到每个列表项，由于某种原因它只是没有附加，当我单击每个列表项时，函数不会触发。

以下是列表的 HTML：

<ion-list class="queue-page--actions__haircut__tab-open" radio-group *ngIf="haircutTab" [(ngModel)]="selectedCut">
    <ion-list-header class="queue-page--actions__haircut__tab__header">
      Select a cut
    </ion-list-header>
    <ion-item *ngFor="let item of getCuts()" (click)="open($event, item)">
      <ion-label>{{item.name}}</ion-label>
      <ion-label>£{{item.price}}</ion-label>
      <ion-radio checked="{{item.name == selectedCut}}" value="{{item.name}}"></ion-radio>
    </ion-item>
</ion-list>

Get cuts

是页面控制器上的函数(this.cuts是数组类型，返回json对象数组(：

public getCuts(){
    return this.cuts;
}

最后，open(( 函数如下所示：

public open(event, item){
    alert("Clicked");
    console.log(item)
}

无法弄清楚这里出了什么问题，也许是怀疑范围问题，但真的不确定。

Answer 1

像这样尝试

<ion-item *ngFor="let item of cuts" (click)="open(item)">
:
</ion-item>

Answer 2

感谢 Ionic 2 论坛上的这篇文章，我找到了解决这里提出的问题的方法。

我现在不使用(click)，而是在ion-radio元素上使用(ionSelect)。可以在此处看到一个示例：

<ion-item *ngFor="let item of cuts" (click)="open(item)">
      <ion-label>{{item.name}}</ion-label>
      <ion-label>£{{item.price}}</ion-label>
      <ion-radio (ionSelect)="cutChanged(item.name)" checked="{{item.name == selectedCut}}" value="{{item.name}}"></ion-radio>
</ion-item>

其中 cutChanged(( 控制器上的函数如下所示：

cutChanged(cut){
    alert(cut);
}

此实现现在可以工作并在点击事件时触发。也许单选按钮在 Ionic 中的工作方式有些不寻常？

Answer 3

不需要

您的getCuts()方法。调用 open() 函数时无需传递事件。open()方法中还缺少分号。最终代码 ：

<ion-list class="queue-page--actions__haircut__tab-open" radio-group *ngIf="haircutTab" [(ngModel)]="selectedCut">
    <ion-list-header class="queue-page--actions__haircut__tab__header">
      Select a cut
    </ion-list-header>
    <ion-item *ngFor="let item of cuts" (click)="open(item)">
      <ion-label>{{item.name}}</ion-label>
      <ion-label>£{{item.price}}</ion-label>
      <ion-radio checked="{{item.name == selectedCut}}" value="{{item.name}}"></ion-radio>
    </ion-item>
</ion-list>

open(( 函数将是：

public open(event, item){
    alert("Clicked");
    console.log(item);
}