How to update the child of a model based on a select option

My question might feel stupid but I got this model :


export interface Role {
id: number;
rolename: string;
permissions: string;
createdAt: string;
updatedAt: string;
}

export interface User {
id: number;
username: string;
createdAt: string;
updatedAt: string;
Role: Role;
}



And I want to create a form to update the role based on the list of roles I have.

I have tried this:

<label for="roleId" class="form-label">Role:</label>
<select name="" [(ngModel)]="selectedUser.Role" (change)="onRoleChange()">
<option *ngFor="let role of roles" [value]="role">{{ role.rolename }}</option>
</select>



But I got an error : Object is possibly 'null'.ngtsc(2531)

I didn't find any good advice online, should I use a 2nd variable as 'selectedRole' and bind this value or should I create a child component to deal with it ?

I tried to change it to

<select name="" [(ngModel)]="selectedUser?.Role" (change)="onRoleChange()">
<option *ngFor="let role of roles" [value]="role">{{ role.rolename }}</option>
</select>



Or change the model as


export interface Role {
id: number;
rolename: string;
permissions: string;
createdAt: string;
updatedAt: string;
}

export interface User {
id: number;
username: string;
createdAt: string;
updatedAt: string;
Role?: Role;
}



But it does not get any better.

Continue reading...