如何在Angular中更新下拉列表值并解决点击表单值变为null的问题

问题修复方案 #

你的代码存在两个Angular模板绑定的语法错误，修改后即可解决下拉值变null的问题：

• ngModel双向绑定写法错误：你用了插值表达式{{}}包裹ngModel的值，Angular双向绑定应该使用[(ngModel)]语法，同时绑定的值要和option的value类型对应，由于option传的是service.id，所以ngModel应该绑定editPersonne?.serviceId（如果editPersonne的service字段是对象，直接取它的id字段即可）
• option的value绑定错误：你直接写了value="service.id"，这是把固定字符串"service.id"传给value，而非取service变量的id属性，需要用[value]="service.id"实现动态绑定。

修复后的完整代码 #

<div class="form-group">
    <label for="service">Service</label>
    <select id="service" class="form-control" [(ngModel)]="editPersonne?.serviceId" name="serviceId">
        <option value="">Service</option>
        <option [value]="service.id" *ngFor="let service of services" >{{service.designation}}</option>
    </select>
</div>

额外注意点 #

如果你的editPersonne.service是完整的service对象而非单独的id值，可以把value替换为[ngValue]="service"，同时ngModel直接绑定editPersonne.service即可，不需要单独提取id字段。另外要确保你的Angular模块中已经导入了FormsModule，否则ngModel双向绑定不会生效。

内容的提问来源于stack exchange，提问作者Syrine Ben Hassen