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>

獲取剪切是頁面控制器上的函數（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);
}