ngFor 和（点击）在 Ionic 2 和 Angular 2 中不起作用答案

【问题标题】：ngFor and (click) not working in Ionic 2 & Angular 2ngFor 和（点击）在 Ionic 2 和 Angular 2 中不起作用
【发布时间】：2017-11-14 22:49:21
【问题描述】：

当迭代 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>

getcuts是页面控制器上的函数（this.cuts是数组类型，返回一个json对象数组）：

public getCuts(){
    return this.cuts;
}

最后，open()函数如下：

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

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

【问题讨论】：

标签： javascript angularjs ionic2 click ngfor

【解决方案1】：

这样试试

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

【讨论】：

这是我最初的编码方式，但是这不起作用。不知道为什么，因为我在其他格式中使用过相同的格式。我的猜测是，当您单击 Ionic 单选按钮时，单击事件由于某种原因而停止。我已经发布了我为这个问题找到的解决方案。

【解决方案2】：

您的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);
}

【讨论】：

我最初将它作为剪切而不是 getCuts()。我根据另一个 StackOverflow Q 的建议实现了 getCuts()。不幸的是，您建议的上述实现也不起作用，单击离子单选按钮不会触发任何事件。

【解决方案3】：

感谢 Ionic 2 论坛上的 this post，我找到了解决此处提出的问题的方法。

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

<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 中的工作方式可能有些不同寻常？

【讨论】：

我在 Angular 8 中遇到了同样的问题，知道如何在 Angular 8 中解决它吗？