I am facing a situation where I have two objects, one coming from my DTO and the other from the User service.
My goal is to bind a previously saved value to the select element.
However, because these objects are different, it seems that the value is not being displayed (or so I think).
Here is the object with the data:
https://i.sstatic.net/hBHkZ.png
And here are the objects from the list in the select:
https://i.sstatic.net/hZNmU.png
How can I delete or filter them to match?
My approach was to correct a mistake in the JHipster generate process where a Long usuarioId was generated in the DTO, but on the Angular side all Users were retrieved and their ids compared when saving the entity. Instead, I retrieved the User object using the UserService find by login method.
This is my solution, which I believe may be helpful:
Firstly, in the ManyToMany relationship:
@ManyToOne
@JsonIgnoreProperties("")
private User coordinador;
public User getCoordinador() {
return coordinador;
}
public ExtendedUser coordinador(User user) {
this.coordinador = user;
return this;
}
public void setCoordinador(User user) {
this.coordinador = user;
}
And in the DTO:
private Long coordinadorId;
private String coordinadorLogin;
public Long getCoordinadorId() {
return coordinadorId;
}
public void setCoordinadorId(Long userId) {
this.coordinadorId = userId;
}
public String getCoordinadorLogin() {
return coordinadorLogin;
}
public void setCoordinadorLogin(String userLogin) {
this.coordinadorLogin = userLogin;
}
In the Angular component's HTML file:
<div class="form-group">
<label class="form-control-label" jhiTranslate="sigemApp.extendedUser.coordinador" for="field_coordinador">Coordinador</label>
<select class="form-control" id="field_coordinador" name="coordinador" [(ngModel)]="extendedUser.coordinadorLogin" >
<option [ngValue]="null"></option>
<option [ngValue]="userOption.login" *ngFor="let userOption of users; trackBy: trackUserById">{{userOption.login}}</option>
</select></div>
Lastly, in the component.ts file:
users: IUser[];
this.userService.query().subscribe(
(res: HttpResponse<IUser[]>) => {
this.users = res.body;
},
(res: HttpErrorResponse) => this.onError(res.message)
);
trackUserById(index: number, item: IUser) {
return item.login;
}
getSelected(selectedVals: Array<any>, option: any) {
if (selectedVals) {
for (let i = 0; i < selectedVals.length; i++) {
if (option.id === selectedVals[i].id) {
return selectedVals[i];
}
}
}
return option;
}
To save it, I use the userService to retrieve the User object, as shown in the UserService:
Optional<User> coordinador = userRepository.findOneByLogin(extendedUserDTO.getCoordinadorLogin());
updateExtendedUser.setCoordinador(coordinador.get());
extendedUserService.save(updateExtendedUser);
Here is what my code currently looks like: export class AddressingService { myVar; protected static getUserId() { this.myVar // property myVar doesn't exist on type 'typeof MyService' } } Any ideas on how to resolve this iss ...
I'm currently working with an ion-toggle in Ionic 2. I want it to be set as default to on, however, using the checked attribute did not produce the desired result. <ion-toggle [(ngModel)]="ratingModel.contact" formControlName="contact" id="contact ...
Encountering an issue with Angular2 RC5 that seems to be causing an infinite loop problem. The app.component, which is bootstrapped by the app.module, appears quite simple: @Component({ selector: 'my-app', template: `TEST` }) export cl ...
"use client"; -- Imports and interfaces const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => { const [data, setData] = useState<SubscriptionData>({}); -- Functions return <> ...
Utilizing the Angular Control value accessor interface for creating reusable forms in my project has presented a challenge when it comes to setting values while constructing the parent form. For instance, let's consider an Address object that contain ...
I have created a basic code example which can be found at this link. However, the cards are not rendering in a single line. Can anyone guide me on how to make them appear in one line? Your assistance is greatly appreciated. Thank you. ...
On a button, I have a URL that looks like this: www.mywebsite.com/infopage?scrollTo=section-header&#tab3 After clicking the button, it takes me to the URL above and opens up the tab labeled tab3, just as expected. However, I would like it to direct m ...
import { Component, OnInit, ViewChild } from '@angular/core'; import {Subject} from 'rxjs'; import {debounceTime} from 'rxjs/operators'; import {NgbAlert} from '@ng-bootstrap/ng-bootstrap'; @Component({ selecto ...
This is my first time working with React and I want to display the following data (id, name, status, and quantity): interface Goods { id: number; name: string; status: string; quantity?: number; } export const getGoods = (): Promise<Goods[]> ...
Within our Angular-7-Application, we rely on @ngrx and @ngrx/router-store to incorporate query params into the state. Many parts of the application consist of paginated lists. Each list is represented as a component with the Pagination-Component integrate ...
As a newbie in the world of TypeScript, I am venturing into creating a backend with Node.js (or should I say Node.ts?). Currently, I am in the early stages of setting up my server and exploring the fundamentals. My setup includes ts-node version 8.6.2 and ...
While working on a demo for another question on Stack Overflow, I initially used angular-cli and then switched to Plunker. I noticed a peculiar difference in behavior with the import statement between the two setups. The issue arises with the second impo ...
Hello, I am currently using the Capacitor's convertFileSrc method to determine the size of a blob when uploading videos on my application. While it works perfectly fine on iOS devices, I am encountering an issue with Android. The blob size always retu ...
I am facing an issue with a form. I have a JSON object containing some data, and in my HTML form, I am using ngFor to assign each input tag with a value from this JSON object. The problem arises when I want to update the values in the inputs and click the ...
In the previous versions of Firebase, I used to import the Typescript definition of the User like this: import {User} from 'firebase'; However, with the introduction of v8, this import no longer works and gives the following error message: Mod ...
I am facing a situation where I have a navigation menu with three submenus, each having their own set of child routes. However, some of the submenus are not always visible based on the user's permissions retrieved from the server. When the main menu ...
I have gone through the answers provided in this source and also here in this link, but it appears that they are outdated. I attempted to enhance the type definition for the button component in various ways, including a separate typings file (.d.ts) as we ...
My current project in NextJS requires a simple login function, and I have been attempting to implement it using the Context API to store user data. However, I am facing an issue where the context is not updating properly after fetching data from the back-e ...
As a beginner in coding, I have created a canvas in Angular and am attempting to pass data received from my server to a function within ngAfterViewInit(). When I hard code the values I want to pass, everything works perfectly. However, if I try to pass da ...
Currently, I am in the process of working on a project where I aim to provide users with a daily percentage of points based on their current available points and update this data in my Firebase database. My goal is to add points for users on a day-to-day b ...