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

问题是您错过了使用[(ngModel)]将这些元素绑定到适当的属性。

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

<ion-list radio-group>

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

ion-radio

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

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

关于public changeSelection(x: any) { this.selectedOptionText = x.displayName; }，错误是相同的，该元素未绑定到组件中的任何属性。您可以通过执行以下操作将其绑定到ion-searchbar属性：

searchString

如果您仍希望在触发 blur 事件时运行某些代码，则可以通过添加事件名称来订阅<ion-searchbar [(ngModel)]="searchString"></ion-searchbar>中的任何Output events介于（）之间并从组件中分配方法。例如，要使用ion-searchbar方法绑定ionBlur事件，您可以这样做：

onBlur

您可以找到代码正常的working plunker here。

Answer 2

如果有changeSelection方法，则会调用它。我在你发布的代码中没有看到任何内容。

无法触发点击或关键字事件

2 个答案: