After successfully implementing *ngFor to display my data, I encountered an issue where nothing happens when I try to trigger an event upon a change.
Below is the snippet of my HTML code:
<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>
I was expecting the (click) event to execute and call the changeSelection method in the JavaScript file:
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;
}
}
I can't seem to figure out what's missing here. Is there any specific import that I overlooked or something more complex at play?