Guide on setting selected ngFor in Ionic2

I've been trying to set the selected option in my ngFor loop for Ionic2, but it doesn't seem to be working as expected. Here's what I've attempted:

<ion-item>
      <ion-label>Source</ion-label>
      <ion-select [(ngModel)]="filter" >
        <ion-option value={{item.val}} *ngFor="let item of options" selected="item.val == 'pencil'">{{item.name}}</ion-option>
      </ion-select>
    </ion-item>

Unfortunately, the selected option is not displaying as the default choice.

In my TypeScript file:

public options =  [
        {
            "name": "Pencils",
            "val" : "pencil"
          }
             .
             .
             .

        ];

Answer №1

With the presence of ngModel, it is recommended to initialize the filter with the selected item like so:

this.filter = this.items[0].value;

Answer №2

[chosen] instead of selected and [amount] instead of value :

<ion-option [amount]="item.val" *ngFor="let item of options" [chosen]="item.val == 'pen'">{{item.name}}</ion-option>
      </ion-select>

remark :

  1. use property when attaching to static value ex: value="someValue"
  2. use [property] when attaching to a variable or expression ex: [value]="getSomeValue()".

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

Deploying Node.js on Heroku

After deploying a test app using node.js on Heroku, I checked the Heroku log file and it seems like everything is running smoothly. 2017-02-09T12:25:56.034718+00:00 heroku[web.1]: Starting process with command `npm start` 2017-02-09T12:25:58.77986 ...

Enhance row visibility by clicking a button in an ajax table

I'm facing an issue where I am trying to apply a highlight class to the selected row in an ajax table when clicking on the edit button, but for some reason my code is not working as expected. Can someone assist me with this problem? Thank you in advan ...

If I type too quickly in the input field, it ends up displaying the incorrect div

I need to display two different dropdowns in my input field. To achieve this, I am using a method called shouldShowWarningBox that gets triggered every time the user updates the input and updates the value of showWarningBox accordingly. However, when I typ ...

The utilization of ReactJS to render basic HTML elements

Completely new to react, I'm not sure if my code is written the "react way". Created some react classes rendering a Bootstrap Modal. Set the initial states by calling an Ajax function within componentsDidMount. Everything works until trying to insert ...

Trouble with loading Mapbox tiles within a UI-Bootstrap tab

I am currently facing an issue where I am trying to embed a mapbox map within an angular-ui-bootstrap tab. Unfortunately, it appears that most of the tiles are not loading upon initialization and are not being requested as the map is panned. Interestingly, ...

Angular's window.onload event occurs when the page has finished

How can I achieve the equivalent of window.onload event in Angular? I am looking to fade out and remove my preloader, but only after all resources such as images are fully loaded. Using $viewContentLoaded alone does not cover this scenario since it indica ...

JavaScript function occasionally experiences loading issues with CSS images

Have you ever encountered issues with a CSS background image failing to load? What might be the underlying cause? I've written some Javascript code that looks like this: function progressBar(file_id) { pbar = ($("<div />").attr('id&a ...

Just running JavaScript code repeatedly in a loop

After running this script, I observed that there are 20 repetitions of the <button> tags. <?php for ($i = 1; $i <= 20; $i++) { ?> <button id="btn-<?php echo $i;?>">Button<?php echo $i;?></button> <script t ...

Implement dynamic configuration injection by allowing users to specify the name of a configuration file during runtime, instead of having it fixed in the code

In my development using webpack, I am exploring ways to make my application configurations more dynamic. Presently, the project is a create-react-app that has been ejected. For instance, when creating a local build in my package.json file, I include the f ...

The ssh2 module experiences a quiet failure when provided with credentials that are successful when used from

After successfully connecting to Google Cloud Compute using the CLI with a command like this: ssh -i ~/.ssh/my-ssh-key me@ipnumber I have encountered a problem where the ssh2 module is not providing any output or errors. var fs = require('fs') ...

Screenshots of playwright failing to work on Github.''

Within my playwright.config.ts file, I have specified the following: use: { ... screenshot: 'only-on-failure', } When running tests locally and they fail, screenshots are successfully saved in /test-results. However, the issue arises when th ...

"Error: imports are undefined" in the template for HTML5 boilerplate

After setting up an HTML5 Boilerplate project in WebStorm, I navigate to the localhost:8080/myproject/src URL to run it. Within the src folder, there is a js directory structured like this: libraries models place.model.ts place.model.js addr ...

Connecting HTML to an AngularFirestore collection using snapshotChanges

In my mobile app, I am using AngularFirestore2v5/rxjs to connect a hybrid Ionicv3/Angularv4 app to a Firestore collection. While binding UI with AngularFirestore.valueChanges works fine, switching to snapshotChanges for retrieving the id is causing some is ...

"Exploring the process of animating a mesh in three.js that was generated outside of the init

Currently diving into the world of three.js, I'm eager to grasp the concept of animating a mesh that was created by a function outside of the usual init() method. In my experiments, I've successfully managed to create and rotate a cube within th ...

Receiving unexpected results when returning a function within a React hook

I'm currently working on developing a custom React hook that will provide users with a function to execute. This hook is designed to generate a function internally. Check out this simplified example // fetch.js import { useEffect, useState} from &qu ...

implementing toggle functionality for an array of items in ReactJS

I have an array and I am trying to create a show/hide feature for each item based on toggling. When I click on one item, it should expand while simultaneously hiding the previously expanded item. Here is the code snippet I have been working on: class App e ...

Reconfigure a portion of a string using Vue's dynamic replacement feature

Currently tackling a problem. In my possession is a string that essentially consists of HTML code: let htmlTitle = "<a href="/news/sky-sport-hd-in-italia-dal-18-novembr">Sky Sport HD in italia dal 18 novembre</a> | <a href="/news/ecco-il-g ...

Using PHP to populate Highcharts with data through the use of json_encode

I've been grappling with integrating highcharts and json_encode using PHP for a few days now. I'm confident that my data is correctly formatted, yet the chart isn't updating as expected. The category data updates smoothly, and the series dat ...

What could be causing my Ajax request with dataType set to "jsonp" to encounter errors?

My code includes an Ajax call that looks like this: var baseurl = Office.context.mailbox.restUrl; var getMessageUrl = baseurl + "/v2.0/me/messages/" + rest_id + "?$select=SingleValueExtendedProperties&$expand=SingleValueExtendedPropertie ...

Can the table be automatically updated on page reload?

My goal is to populate a table using $.ajax(), but the content is not showing up when the page first loads. Is there something missing in my implementation of the $.ajax() function? Here's the HTML structure: <div class="row"> <div clas ...