无法触发 click 或 keyup 事件

Question

所以我已经设法让 *ngFor 输出我的数据，但是当我尝试在某些事情发生变化时触发事件时似乎没有任何反应。

这是我的 HTML:

    <ion-content padding class="home">
      {{ searchString }}
      {{ selectedOption }}
      <ion-searchbar (keyup)="onKey(box.value)"></ion-searchbar>


      <ion-list radio-group>
        <ion-list-header>
          <span class="listHeader">Items</span><span class="pullRight">Showing 3 of 3</span>
        </ion-list-header>

        <ion-item *ngFor="let x of Options" (click)="changeSelection(x)">
          <ion-label>{{ x.displayName }}</ion-label>
          <ion-radio value="{{ x.id }}"></ion-radio>
        </ion-item>
      </ion-list>

</ion-content>

我希望 (click) 事件触发，运行 javascript 中的 changeSelection 方法：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    reportOptions;
    selectedOption;
    searchString;
    constructor(private navController: NavController) {

    this.Options = [    {
                                displayName: 'Test Option 1',
                                id: '1'
                            },
                            {
                                displayName: 'Test Option 2',
                                id: '2'
                            },
                            {
                                displayName: 'Test Option 3',
                                id: '3'
                            }
                          ];
    this.selectedOption = 'Hello';

    }

    changeSelection(x) {
        this.selectedOption = 'world';
    }
    onKey(value: string) {
        this.searchString= value;
    }

}

看不到我在这里遗漏了什么，是我遗漏了导入还是更复杂的东西？

Answer 1

changeSelection 方法将被调用，如果有的话。我在您发布的代码中没有看到任何内容。

Answer 2

问题是您没有使用 [(ngModel)] 将这些元素绑定到正确的属性。

因此，首先与 ion-radio 元素相关，您添加了 radio-group 属性

<ion-list radio-group>

但是您忘记将这些单选按钮绑定到 Component 中的 selectedOption 属性。通过在每次 select 收音机时添加 ngModel，该值将自动分配给 selectedOption。如果您仍想获取该广播的文本，您可以订阅 ion-radio 元素中的 ionSelect 事件，如下所示：

<ion-radio value="{{ x.id }}" (ionSelect)="changeSelection(x)"></ion-radio>

然后您必须在组件中添加该方法：

public changeSelection(x: any) {
    this.selectedOptionText = x.displayName;
}

关于 ion-searchbar，错误是相同的，该元素未绑定到组件中的任何属性。您可以通过以下方式将其绑定到 searchString 属性：

<ion-searchbar [(ngModel)]="searchString"></ion-searchbar>

如果您仍想运行触发 blur 事件的一些代码，您可以从 ion-searchbar 通过在 () 之间添加事件名称并从您的组件分配一个方法。例如，要将 ionBlur 事件与我们的 onBlur 方法绑定，您可以这样做：

<ion-searchbar [(ngModel)]="searchString" (ionBlur)="onBlur()"></ion-searchbar>

您可以找到一个 working plunker here 并且您的代码可以正常工作。

无法触发 click 或 keyup 事件

Can't get click or keyup event to fire

typescript

ionic2

angular