Angular 17下拉框值无法绑定到Project类嵌套的ClientLocation

你的问题核心在于下拉框的绑定路径错误，当前仅更新了Project类外层的clientLocationID字段，并未同步更新嵌套的clientLocation对象属性，导致后端接收到的嵌套类始终是构造函数默认值。以下是两种直接有效的解决方法：

方法一：直接绑定到嵌套对象属性 #

修改下拉框的[(ngModel)]绑定路径，直接指向嵌套的clientLocation.clientLocationID，选择后会直接更新嵌套类的ID：

<div class="form-group row pt-1 pb-1">
    <label for="txtNewClientLocations" class="col-sm-4 form-select-label pt-2">Client Locations</label>
    <div class="col-sm-6">
        <select class="form-select" [(ngModel)]="newProject.clientLocation.clientLocationID" name="ClientLocation" aria-label="Please Select" id="txtNewClientLocations">
            <option [value]="null">Please Select</option>
            <option *ngFor="let clientLocation of clientLocations" [value]="clientLocation.clientLocationID">{{clientLocation.clientLocationName}}</option>
        </select>
    </div>
</div>

方法二：通过事件同步更新嵌套类 #

如果需要同时保留外层clientLocationID的更新，可添加ngModelChange事件，在值变化时同步赋值给嵌套对象：

<div class="form-group row pt-1 pb-1">
    <label for="txtNewClientLocations" class="col-sm-4 form-select-label pt-2">Client Locations</label>
    <div class="col-sm-6">
        <select class="form-select" [(ngModel)]="newProject.clientLocationID" (ngModelChange)="newProject.clientLocation.clientLocationID = $event" name="ClientLocation" aria-label="Please Select" id="txtNewClientLocations">
            <option [value]="null">Please Select</option>
            <option *ngFor="let clientLocation of clientLocations" [value]="clientLocation.clientLocationID">{{clientLocation.clientLocationName}}</option>
        </select>
    </div>
</div>

补充说明 #

你的Project类构造函数已经初始化了clientLocation = new ClientLocation()，嵌套对象实例存在，无需额外处理空值问题。两种方法都能确保下拉框选中的ID正确同步到嵌套的ClientLocation类属性中，解决提交后端时嵌套类值未更新的问题。

内容的提问来源于stack exchange，提问作者Grim42