클릭하거나 누르는 이벤트가 발생하지 않습니다.

Question

*ngFor은 내 데이터를 출력하기 위해 노력했지만 아무 것도 바뀌지 않을 때 이벤트를 발생 시키려고 할 때 아무 것도 일어나지 않습니다. ,

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; 
    } 

} 

내가 여기 누락 무엇을 볼 수 없습니다 :

<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 방법을 실행하는 데 기대 :

여기 내 HTML의 내가 누락되었거나 더 복잡한 것이 수입입니까?

Answer 1

[(ngModel)]을 사용하여 해당 요소를 적절한 속성에 바인딩 할 수 없다는 것이 문제입니다.

그래서 먼저 ion-radio 요소와 관련, 당신은 무선 그룹 속성

<ion-list radio-group>

을 추가했지만 당신은 당신의 Component에서 selectedOption 속성을 그 라디오 버튼을 결합하는 것을 잊지. 라디오를 선택할 때마다 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> 

을 그리고 당신은 여전히 ​​트리거되는 흐림 이벤트와 함께 몇 가지 코드를 실행하려면, 당신은을 추가하여 ion-searchbar에서 Output events의 구독 할 수 있습니다() 사이의 이벤트 이름 및 구성 요소의 메서드 할당 예를 들어, 우리 onBlur 방법과 ionBlur 이벤트를 바인딩, 당신은 이런 식으로 할 거라고 :

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

당신은 당신의 코드가 작동을 가진 working plunker here을 찾을 수 있습니다.

Answer 2

changeSelection 메서드가있는 경우 해당 메서드가 호출됩니다. 게시 한 코드에 아무 것도 표시되지 않습니다.