Why isn't the selected value updating in ion-select Ionic 2 when using Angularjs 2?

Currently, I have the following code that is functioning well up to a certain point. However, I am encountering a small issue that I cannot seem to resolve. The problem lies in updating the ion-select after the user selects an option. Essentially, the UI does not reflect the selected value. Any suggestions on how to fix this?

<ion-item>
<ion-label>Classifications</ion-label>
<ion-select [(ngModel)]="selectedItem" #item (change)="onChange(selectedItem)">
<ion-option *ngFor="#item of items" [value]="item">{{item}}</ion-option>
</ion-select>
</ion-item>

onChange(selectedItem) {
   console.log('Selected item: '+selectedItem);
}

The output properly displays as the user selects, but any thoughts on what might be missing here?

Update:

<ion-item> 
  <ion-label>Gender</ion-label> 
  <ion-select [(ngModel)]="gender"> 
    <ion-option value="f" checked="true">Female</ion-option> 
    <ion-option value="m">Male</ion-option> 
  </ion-select> 
</ion-item>

Answer №1

If you are using Ionic 2 beta 10, this code snippet should work:

<ion-item>
    <ion-label>Fest</ion-label>
    <ion-select [(ngModel)]="festId" (ionChange)="festSelected($event, festId)">
        <ion-option *ngFor="let fest of festList" value="{{fest.id}}">
            {{fest.title}}
        </ion-option>
    </ion-select>
</ion-item>

Answer №2

After including the (ionChange)="" code snippet, my problem was resolved and everything worked smoothly.

<ion-select [(ngModel)]="msgType" (ionChange)="getListOfMsg()">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Javascript JSON object is reporting an error, but the JSON validator is indicating that the

Upon receiving a Json object from an API, I realized that it contains numerous backslashes and despite passing it through a json validator, it is marked as valid. When using this json object in JavaScript, everything seems to work fine until the final sect ...

Methods for updating an HTML-select without a page reload in PHP

I am in need of a solution to update a dropdown list without refreshing the page. The scenario is that I have a form where I can add elements, and another form with a dropdown list connected to a database. If the element I want is not available in the drop ...

Switching from React Router version 3 to 4.1.1, what is the best way to organize my routes separately from my app.jsx file?

After successfully running a site with React Router 3.0.5, I decided to update to React Router 4.1.1 which resulted in some errors. My main goal is to have the root route as "/" leading to the app component, while other routes are directed elsewhere. An e ...

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

cmd > java -version Java Version : "1.7.0_11" (Updated) Java(TM) SE Runtime Environment (build 1.7.0_11-b21) Java HotSpot(TM) Client VM (build 23.6-b04, mixed mode, sharing) browsers = IE7,IE8,IE9 (The functionality works smoothly in Google Chrome and ...

Expanding the Capability and Retrieving Data from the Parent Class Using JQuery

How can I access the super object while extending objects with $.extend? I need to extend an object, replace a method, and then invoke the overridden superclass method within the subclass method. ...

Pass KeyEventArgs object to JavaScript function

Is it possible to pass keydown events as parameters to a JavaScript function in Silverlight4? ...

Fixing Email Validation Error in AngularLearn how to troubleshoot and resolve

I'm encountering an issue when trying to develop an email center using regex pattern, as I'm receiving a validator error in HTML. I have already installed ngx-chips and angular-editor, imported all the necessary modules and dependencies. Here is ...

Issue in Ionic 2: typescript: The identifier 'EventStaffLogService' could not be located

I encountered an error after updating the app scripts. Although I've installed the latest version, I am not familiar with typescript. The code used to function properly before I executed the update. cli $ ionic serve Running 'serve:before' ...

Implementing individual NGRX Selectors for each child component to enable independent firing

My component serves as a widget on a dashboard, and I am using *ngFor to render multiple widgets based on the dashboard's data. Each WidgetComponent receives some of its data via @Input() from the parent. parent <app-widget *ngFor="let widget ...

What is the solution for the error message "sh: 1: nx: Permission denied" in a Linux environment

I am facing an issue while attempting to launch an Angular application on a Linux Virtual Machine using: npm start Upon executing the command, the following error message is displayed: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

Error: JQuery AJAX call caused an unhandled RangeError due to exceeding the maximum call stack size

I am facing an issue with a jQuery ajax call. Interestingly, when I comment out the ajax call, everything works perfectly fine. It passes all validations and enters the 'else' part which contains the ajax call. Strangely, if I include an alert by ...

Secure access to an API using a certificate within a Vue.js application running on localhost

My vue.js app is built using vue-cli. The application is hosted at dev.example.com and the REST API can be found at dev.example.com/api/v1/. The backend has added an SSL certificate for security on the development environment. However, when I try to make a ...

Designing an image transformation page by segmenting the image into fragments

Does anyone have insight into the creation process of websites like this one? Are there any plugins or tools that can assist in building something similar? ...

I am having trouble setting breakpoints in Google Chrome

For a while, I've been using Google Chrome to debug my JavaScript code without any issues. However, out of nowhere, I am no longer able to place breakpoints. When I click on the line number where I used to add breakpoints, nothing happens. Sometimes, ...

Generate a graphical representation with react-d3

In an attempt to create a histogram using react-d3-components, I have the following code: import React, { Component } from 'react'; import * as d3 from 'd3'; import * as ReactD3 from 'react-d3-components'; import propTypes fr ...

Issues with Javascript causing MongoDB batch insert to fail

I need assistance with optimizing my Javascript code. I have created a script to insert multiple records into a collection at once using "insertMany()". However, the code I wrote is not functioning correctly: var batch = []; for (i=0; i<10; i++) { ...

Uploading multiple images with a custom meta box in Wordpress

I'm currently working on a project that involves creating a custom post type with a custom meta box. Within this meta box, I am attempting to include a media uploader for multiple images. The goal is to save multiple image IDs in an array. However, I& ...

"Changing the name of a symbol that is automatically imported from an internal library in

Within my module, I find myself using the Element class that is implicitly imported from the "dom" internal library. However, I also need to create my custom Element class within the same module. This presents a problem due to the name collision and poten ...

Maintain synchrony of the state with swiftly unfolding occurrences

I developed a custom hook to keep track of a state variable that increments based on the number of socket events received. However, when I tested by sending 10 simultaneous events, the total value of the state variable ended up being 6, 7, or 8 instead of ...

Storing documents with arrays of objects in Firebase Cloud Firestore and Functions

I am facing a challenge where I need to transfer the following JSON data from my local storage to Firebase Firestore: guides: [ { "id":0, "name":"name0", "sources":[ { "type":"s3", "url ...