Refilling a dropdown menu with previously chosen selections

When a post is created by a user, they are able to choose from a list of potential recipients for the post. After creation, users can go back and edit the post. Now, I am faced with managing two sets of data: one containing all potential recipients and the other containing the recipients selected when the post was originally created.

My dilemma is this: How can I ensure that when editing a post, all potential recipients are available as options but the original recipients are already pre-selected?

<ion-select [(ngModel)]="post.To" [ngModelOptions]="{standalone: true}" multiple="true" cancelText="Cancel" okText="OK">
    <ion-option *ngFor="let member of members.PotentialPeople" [value]="member">
        {{ member.Name }}
    </ion-option>
</ion-select>

angulartypescriptselectionic-framework

Answer №1

It seems that the solution you are seeking is something along the lines of

[selected]="member.Name == potentialMember.Name"

<ion-option *ngFor="let member of members.PotentialPeople" [value]="member" [selected]="member.name == potentialMember.Name">

You can find more insights in Perrier's response on this thread.

How to set default selected value of ion-option?

Based on your description, it appears that you maintain a separate list when a user creates a post containing selected users (distinct from the exhaustive list of potential users).

Therefore, adding [selected]="(user saved to post) == (all possible users)" should automatically pre-select the users already linked to the post during editing.

If the above approach does not yield the desired outcome, please inform me so I can provide further assistance. Thank you.

Answer №2

Utilizing [compareWith] in the frontend enabled me to pass both objects to a function in the controller for comparison.

Implementation on the template:

<ion-select [(ngModel)]="post.To" [ngModelOptions]="{standalone: true}" [compareWith]="compareObjects" cancelText="Cancel" okText="OK">
  <ion-option *ngFor="let member of members.PotentialPeople" [value]="member">
    {{ member.Name }}
  </ion-option>
</ion-select>

In the controller:

compareObjects(currentSelection, potentialSelection): boolean {
    return currentSelection && potentialSelection ? currentSelection.Id === potentialSelection.Id : currentSelection === potentialSelection;
}

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

There is no index signature that accepts a parameter of type 'string' in the type '{ [key: string]: AbstractControl; }'

I'm currently tackling a challenge in my Angular project where I am creating a custom validator for a reactive form. However, I've encountered an error within the custom validators function that I am constructing. Below you will find the relevan ...

javascriptangulartypescriptangular-reactive-formscustomvalidator

Is it not possible to type a Specific Object Type as a Record?

I am looking to create a generic Table Row interface that will only allow objects with primitive attribute values. However, when I try to assign a specific type of object to the row, it fails. Why is this happening and how can I make it work? My goal is to ...

typescript

What is the recommended method for deleting sequelize.connectionManager.getConnection according to the Sequelize documentation?

I am currently developing an AWS Lambda function using Typescript that interacts with a database through Sequelize. According to the official Sequelize documentation, the configuration for Sequelize should be as follows: let sequelize = null; async func ...

typescriptamazon-web-servicesaws-lambdasequelize.jssequelize-typescript

Please clarify that the protractor should make use of the chromedriver that I have personally downloaded

Due to security measures, selenium is not permitted to download the chromedriver during the execution of webdriver-manager update. To address this issue, I personally obtained version 2.27 of the chromedriver for protractor and saved it in the node_module ...

angularseleniumprotractor

Issues with style not loading properly within innerHTML in Angular2

Currently, I am in the process of developing a page using Angular2/4 that includes a left navigation bar. To achieve reusability, I have separated this left menu into its own component and nested it within the main component. The objective is to utilize th ...

htmlangulartypescriptrenderer

Exclusive gathering to discuss @Input attributes

Is there a way to determine if all of the input properties in my component have been initialized with data? Are there any specific events that can help indicate this? Thank you for your assistance! ...

javascriptangular

The useRef hook in typescript seems to be malfunctioning. Everything was working perfectly fine in jsx before

After encountering some errors while trying to adapt working code for typescript, I am seeking advice. The code includes a modal window that should close when anything except the window itself is clicked. Initially functioning in jsx, TypeScript has introd ...

reactjstypescriptuse-ref

angular2 : problem encountered with communication to rest api

Transitioning from PHP to Angular2 has been quite challenging for me, especially when trying to use a real rest API like "Tour of Heroes". I initially thought it would be simple... Currently, I have set up a functional API with Express: curl -XGET http:/ ...

javascriptrestangular

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

Having difficulty resolving a typescript error related to batch.update in my code. const batch = db.batch(); const listingDoc = await db.collection("listings").doc(listingID).get(); const listingData = listingDoc.data( ...

javascriptreactjstypescriptgoogle-cloud-firestore

What sets apart the commands npm install --force and npm install --legacy-peer-deps from each other?

I'm encountering an issue while trying to set up node_modules for a project using npm install. Unfortunately, the process is failing. Error Log: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolv ...

node.jsangulartypescriptnpmnode-modules

Trouble Sending Data from Angular HttpClient to ASP.NET CORE Web API

I have recently developed a new component called "form-page" within the "form" module: The HTML code for form-page.component.html is shown below: <form [formGroup]="form" (submit)="onSubmit()"> <div> <label f ...

htmlangulartypescriptasp.net-core-webapiangular-httpclient

Tips for altering the color of the MUI table sort label icon:

Does anyone know how to change the color of the table sort label icon from gray to red? I am having trouble figuring it out. Any recommendations or suggestions would be greatly appreciated. Here is the code I have been trying to work with: <TableSortL ...

reactjstypescriptmaterial-uistyling

Creating child routes through parent components during testing with Angular

In my application, I have two modules named AppModule and SharedDataModule. The routes for these modules are registered in their corresponding modules using lazy loading. app-routing-module const routes: Routes = [ { path: "", component: ...

angularunit-testingjasmineangular-ui-routerkarma-jasmine

Protractor Cucumber issue: "Error: Module 'ts-node/register' not found - unhandled rejection"

Encountering an issue where step definitions files are not being picked up during execution, resulting in the following error message: Unhandled rejection Error: Cannot find module 'ts-node/register' at Function.Module._resolveFilename (modu ...

node.jsangulartypescriptprotractorcucumber

Utilize Firestore for automatic saving of data from Angular Reactive Forms

In my Angular application, I am facing an issue where data entered in a form needs to be instantly saved and updated in a Firestore database. This is crucial because multiple users will be entering data simultaneously on the same form, real-time values are ...

angularfirebasegoogle-cloud-firestoreangularfire5

Guide to utilizing the .contains(nodeOrNodes) API with a react element containing an arrow function event handler

When looking at the example below, the .contains(nodeOrNodes) => Boolean API functions as expected. index.tsx: import React from 'react'; const Comp = ({ onChange }) => ( <form> <input type="text" placeholder="username" on ...

reactjstypescriptunit-testingjestjsenzyme

Generic type array does not display property

I feel like I must be overlooking something. It seems too straightforward to be causing issues for me. Database.ts export class Database { id: number; } search-input.ts import { Database } from './../resources/database'; import { Inje ...

angulartypescript

How can I make the ion-list stay on top of the ion-footer-bar?

In the process of developing an application, I encountered an issue where the ion-footer-bar would cover the last record in the ion-list. After exploring various solutions, such as using `$scope.$broadcast('scroll.resize');`, the problem still pe ...

angularjsionic-framework

The element 'loginToken' is not found within the type '{ loginToken: string; } | { error: Error; } | { username: string; password: string; }'

I'm currently working on creating a reducer using Typescript and Redux, but I keep running into this error: Property 'loginToken' is not recognized in type '{ loginToken: string; } | { error: Error; } | { username: string; password: str ...

reactjstypescriptreduxredux-saga

Adding custom TypeScript classes to an Electron project is a straightforward process that allows developers to enhance their

Currently working on a hello world project in Electron and stumbled across the possibility of using Typescript for the Main process, . The provided instructions suggest changing the file extension from index.js to index.ts and updating the package.json fi ...

typescriptvisual-studio-codeelectron