Невозможно запустить событие нажатия или нажатия клавиш

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) событие стрелять и запустить метод changeSelection в JavaScript:

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 элементов, вы добавили радио-группу атрибут

<ion-list radio-group>

но вы забыли связать эти кнопки радио к selectedOption собственности от вашего 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 собственности, выполнив:

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

И если вы все еще хотите запустить код с размытости событие срабатывает, вы можете подписаться на любой из Output events из ion-searchbar путем добавления имя события между() и присвоение метода из вашего компонента. например, чтобы связать ionBlur событие с нашим onBlur метода, вы могли бы сделать это следующим образом:

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

Вы можете найти working plunker here с кодом работает.

Answer 2

Метод changeSelection будет вызываться, если был один. Я не вижу в коде, который вы опубликовали.