如何根据选择选项更新模型的子代

Question

我的问题可能感觉很愚蠢，但我得到了这个模型：

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;
}

我想创建一个表单来根据我拥有的角色列表更新角色。

我试过这个：

<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>

但是我收到一个错误：对象可能是“null”。ngtsc(2531)

我在网上没有找到任何好的建议，我应该使用第二个变量作为“selectedRole”并绑定这个值，还是应该创建一个子组件来处理它？

我尝试将其更改为

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

或者将模型更改为

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;
}

但情况并没有好转。

Answer 1

1. 定义selectedUser时使用

   selectedUser:User={} as User
   

2. 或者，如果你定义像

   selectedUser!:User
   

   使用“如果”

   @if(selectedUser)
   {
      ...
      <select name="" [(ngModel)]="selectedUser.Role" >
   }