Obtain the appropriate selection in the dropdown based on the model in Angular

I am working on a dropdown menu that contains numbers ranging from 1 to 10.

Below is the HTML code for it:

<div class="form-group">
                        <label>{{l("RoomNumber")}}</label>
                        <p-dropdown [disabled] = "!roomNumbers.length"  [options]="roomNumbers" autoWidth="false"  [style]="{'width':'100%'}" name="numberRoom" [autoWidth]="true" [(ngModel)]="room.roomNumber"></p-dropdown>
                </div> 

This is how I populate the dropdown:

getRoomNumber(): void {
    for (let i = 1; i <= 10; i++) {
        this.roomNumbers.push({label: i.toString(), value: i});
    }
}

When I save the selection to the database, for example, I get '2'.

During editing, I need to repopulate the dropdown with these numbers and pre-select the number saved in the database. How can I achieve this?

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

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

Guide on importing SVG files dynamically from a web service and displaying them directly inline

With an extensive collection of SVG files on hand, my goal is to render them inline. Utilizing create-react-app, which comes equipped with @svgr/webpack, I am able to seamlessly add SVG inline as shown below: import { ReactComponent as SvgImage } from &apo ...

Error Encountered: AJAX Request Failed with 400 Bad Request

I've been using mithril.js to communicate with my node back-end. I followed the documentation and added an AJAX request, but there seems to be limited information available on mithril. Encountered Error: mithril.js:2130 POST http://localhost:3000/a ...

Issue with custom HTML5 video progress bar not syncing with video playback

Currently, I am working on a project using React with Typescript. I have implemented an HTML5 element range for a seek bar in the video player. The issue I am facing is that although the seek bar works correctly when manually dragged, it does not update as ...

Tips for extracting a specific segment from a URL string

Take a look at the outcome of the console.log below: console.log('subscribe:', event.url); "https://hooks.stripe.com/adapter/ideal/redirect/complete/src_1E2lmZHazFCzVZTmhYOsoZbg/src_client_secret_EVnN8bitF0wDIe6XGcZTThYZ?success=true" I need to ...

Attempting to render an image onto a canvas and apply Caman.js for image editing purposes

Currently, I have a code snippet that allows me to draw an image onto a canvas. Here is the code: var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var ...

React Error: Invalid Element Type with Named Exports

I've been diving into the world of React hooks and functions, working on three different files. First, there's one that establishes a context called SummaryContext. The second file contains a class component that consumes this context named WikiS ...

Steps to prevent closing the alert box when clicking outside of it in Ionic

I am currently developing an Ionic 2 app and I have implemented the following component: http://ionicframework.com/docs/components/#alert import { AlertController } from 'ionic-angular'; export class MyPage { constructor(public alertCtrl: Al ...

Find the identification number by searching through the text

I'm trying to find a way to retrieve the node id during a text search. Here's an example: http://jsfiddle.net/53cvtbv9/529/ I attempted using two methods to get the id of a node after the search: console.log($('#jstree').jstree(true). ...

Is there a way to modify a specific item within a useState Array in Reactjs?

Having a useState hook that stores data in the following structure: const [orderData, setOrderData] = useState({ demoData1: '', demoData2: '', demoData3: '', demoArrayData: [{itemName: '', itemNumber: ...

Where should AJAX-related content be placed within a hyperlink?

When needing a link to contain information for an AJAX call, where is the correct place to include the info? I have typically placed it in the rel attribute, but after reviewing the documentation for rel, it appears that this may not be the right location ...

jQuery is used to make an object fade out once another object has been moved into place

As I delve into the world of jQuery, I've decided to create a simple Super Mario imitation. The concept is to control Mario using arrow keys and fade out mushrooms once Mario reaches them. However, my attempts at achieving this result have not been su ...

Unable to retrieve Vuex state within a function

Currently, I am developing a Laravel+Vue application where Vuex is used for state management. While working on form validation, everything seems to be progressing smoothly except for one particular issue that has me stuck. The problem arises when I attempt ...

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

When selecting the gear icon for the menu option in a table row, I would like the background to turn yellow. I attempted the following code to highlight the table row: var view = Core.view.Menu.create({ model: model, menuContext: { ibmm: ibmm }, ...

Unable to dynamically add an element to a nested array in real-time

I'm currently developing an angular tree structure that contains a large nested array. nodes : public fonts: TreeModel = { value: 'Fonts', children: [ { value: 'Serif - All my children and I are STATIC ¯\ ...

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

Encountering npm error code ERR_SOCKET_TIMEOUT while attempting to generate a React application

Every time I attempt to create a React app using the command: npx create-react-app chat-app I encounter this error message: Error I have attempted various solutions in an effort to resolve the error: To check if I am behind a proxy, I ran the following ...

Generate types based on properties of a nested interface dynamically

Consider the setup provided: enum FormGroups { customer = 'customer', address = 'address', } interface Customer { 'firstName': string; } interface Address { 'street': string; } interface SomeFormEvent { ...

Utilizing React Views in an Express Environment

I am struggling to find a simple example that demonstrates how to connect an Express.js route to render a React view. This is what I have tried so far. +-- app.js +-- config | +-- server.js +-- routes | +-- index.js +-- views | +-- index.html app. ...

Customizing an image with personalized text and then sending it to a server using a combination of javascript and

Looking for a way to add text to an image saved on the server, then save the edited image back to the server. I've heard using canvas is the best approach, but struggling to find the specific solution I need. ...