Unselected default option in Angular 4's select dropdown

My goal is to use Angular to retrieve a value from a variable and display it as the first option in a select element, while keeping the rest of the options below static. The issue I am facing is that even though Angular is fetching the data successfully, the first option always appears blank.

HTML

<select [(ngModel)]="sub_planning">
<option value="data[0].value" >{{data[0].name}}</option>
<option *ngFor="let c of subdimension" [ngValue]="c.value">{{c.name}}</option>
</select>

TS

sub_planning = '0';
subdimension = [{'name': 'oneabc','value': 1 },
  {'name': 'twoabc','value': 2}];

I have come across some solutions online, but they are catered towards Angular 2 and seem incompatible with Angular 4.

Answer №1

Due to incorrect data types,

sub_planning = 1

Note: This is a numeric type.

SEE LIVE DEMO

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

Can you explain how the Facebook Like button code functions and how I can create a similar feature on my own platform?

I have a website with 250 different items, each containing its own Like button using the standard Facebook "Like" code: div class="fb-like" data-href="http://www.mywebpage.com/myproductpage" data-send="false" data-layout="button_count" data-width="80" dat ...

Summing Values with Linq.js Filter

Can you apply a filter in Linq.JS using SUM? This is my attempt: var query = Enumerable .From(self.data()) .Where("$$.Sum($.percent) > 100") .ToArray(); Issue encountered: linq.js: Uncaught TypeError: $$.Sum is ...

Launching an Ionic 2 app with Angular 2 from a different native application

We are currently in the process of developing an application using a mobile framework called MAF. Additionally, we have another app which was built using Angular 2/Ionic 2. Our goal is to launch this Angular2/Ionic2 app from within the MAF-built app. For ...

What is the process for activating an event before another event on the same element with vanilla JavaScript?

Having an issue with the eventListener function. I am using the external library jquery.jstree-pre1.0fix2, which triggers a blur event on an input in my case. However, I need to trigger my event before the one from the library. I have come across some sol ...

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

Within my project, specifically in summary.component.ts, I have two arrays that are interdependent: state: State[] city: City[] selection: number[] = number The state.ts class looks like this: id: number name: string And the city.ts class is defined as f ...

Is there a way to confirm whether or not two files are identical?

Is there a reliable method to determine if two files are identical? I've been using a solution that involves downloading the first part of each file, converting the data to base64, and then comparing them. However, I've encountered an issue wher ...

Retrieve the most recently added item in the Material-ui Autocomplete component

Currently, I am incorporating the material-ui Autocomplete component with multiple selection feature. In one specific scenario, I require the ability to retrieve only the value of a newly added item. Despite utilizing the onChange listener, the event pro ...

Executing an Ajax SPARQL request in Firefox

I've been attempting to run an asynchronous Ajax sparql query on dbpedia using Firefox, but I encountered a strange issue that I can't seem to figure out. Surprisingly, the query works perfectly fine in Chrome, Edge, and Internet Explorer, but wh ...

Tips for configuring TypeScript in a monorepo to successfully compile private packages

I have configured a monorepo using turborepo that includes Nestjs for the backend and Nextjs for the frontend. To reuse prisma definitions, I separated them into their own package with its own tsconfig. In the index file of my database package where prism ...

What is the correct way to format responses written within response.write() in NodeJS?

Just starting out with NodeJS and express and following a tutorial on displaying two headings in the browser. Came across an issue where using res.send() twice wasn't working, so my instructor introduced me to the write method. Interestingly, when she ...

Include a lower border on the webview that's being shown

Currently, the webview I'm working with has horizontal scrolling similar to a book layout for displaying HTML content. To achieve this effect, I am utilizing the scroll function. My inquiry revolves around implementing a bottom border on each page usi ...

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

Tips for executing a type-secure object mapping in Typescript

I am currently working on creating a function in Typescript that will map an object while ensuring that it retains the same keys. I have attempted different methods, but none seem to work as intended: function mapObject1<K extends PropertyKey, A, B>( ...

The PHP script is not receiving the post parameters sent in the ajax request

Help Needed jQuery.ajax({ url: 'PHPdocs/appsearch.php', data: {term:'blub'}, type: "POST", async: true, data: "text", succes ...

What is the best way to transfer two distinct states from my ngrx effect to my service function?

I am encountering a dilemma with my effects function, where I am attempting to pass data from a dispatched action and a separate selector to a service function. However, I am finding myself confused by the RXJS syntax and suspect that I may not be mapping ...

What is the process for using AJAX and PHP to upload an image file?

I'm facing an issue where I want to insert an uploaded image into a database with user details for a profile picture. The output I receive currently shows {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}. How can th ...

Tips for preventing Angular from requiring an additional tag for a child component

Consider a scenario where I have a parent and child component in Angular 12. Their templates are structured as follows: Parent: <h1>This is the parent component</h1> <div class="container"> <div class="row"> ...

Angular: Object contains data, but its properties have not been defined

I am encountering an issue while trying to access properties of the Dto object filled from my rest service, as they are coming up undefined. Firstly, I fetch the data: this.mapservice.getAllCoordinates().subscribe((data: CoordinateDto[]) => { this.co ...

JavaScript Electron application: Identifying the essential directories to include in a Git repository

When developing an Electron app using node.js and the CLI, numerous directories and files are automatically generated in the project directory. However, many of these files may not be necessary to save in my git repository. How do developers typically han ...

What is causing the consistent error message "unable to read property 'logged' of undefined"?

Here is the code snippet from my app.js: var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie- ...