Angular CRUD应用编辑时下拉框选中状态设置问题求助

问题核心是类型不匹配：你的下拉框选项value是字符串类型的"true"/"false"，但从JSON获取的data.complete是布尔类型的true/false，Angular的ngModel采用严格类型匹配，两者无法对应，导致选中状态不生效。

解决方案：修改下拉框选项的value类型为布尔值 #

把mat-option的value改成属性绑定的布尔值，用[value]代替直接写value：

<mat-form-field class="example-full-width">
  <mat-label>Complete</mat-label>
  <mat-select [(ngModel)]="complete" name="complete" [ngModelOptions]="{standalone: true}">
    <mat-option [value]="true">True</mat-option>
    <mat-option [value]="false">False</mat-option>
  </mat-select>
</mat-form-field>

原理说明 #

• 直接写value="true"时，Angular会将其解析为字符串"true"
• 用[value]="true"时，Angular会将其解析为布尔值true，和你从JSON获取的data.complete类型完全一致，ngModel就能正确匹配并选中对应选项。

你的TS代码无需修改，保持原setUpdate方法即可：

setUpdate(data:any)
{
     this.taskname = data.taskname;
     this.description = data.description;
     this.complete = data.complete;
}

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