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中工作

回答

相关问题