ngFor和（單擊）不能在Ionic 2和Angular 2中工作

在通過ngFor項的數組迭代時，（click）事件無法附加到每個列表項，由於某種原因它不會附加並當我點擊每個列表項時，函數不會被觸發。ngFor和（單擊）不能在Ionic 2和Angular 2中工作

下面是列表的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) 
}

不能找出什麼是摹這裏錯了，也許是對範圍問題的懷疑，但實際上並不確定。

來源

2017-06-13 Alex Wiley

嘗試這樣

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

來源

2017-06-13 09:17:39

這是我最初編碼它的方式，但是這不起作用。不知道爲什麼，因爲我在其他格式中使用了相同的格式。我的猜測是，當你點擊一個離子單選按鈕時，點擊事件由於某種原因被停止。我發佈了一個解決方案，我發現這個問題。 –

不需要你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); 
}

來源

2017-06-13 10:27:15

我最初把它作爲剪切而不是getCuts（）。我實現了getCuts（）作爲來自另一個StackOverflow Q的建議。上面的實現，你不幸的建議不起作用，沒有事件被激發與離子單選按鈕被點擊。 –

由於this post對離子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單選按鈕的工作原理可能有些不同尋常之處？

來源

2017-06-13 13:54:59

ngFor和（單擊）不能在Ionic 2和Angular 2中工作

回答

相關問題