Angular 12中共用mat-select编辑场景如何显示数据库保存的选中值

问题原因 #

• mat-select 同时绑定了 [(value)]="selected1" 和 [(ngModel)]="dataKamar.ID_RUANG" 两个双向绑定规则，逻辑冲突导致回显优先级紊乱
• 存在时序差问题：如果下拉选项dataRuang还未从接口加载完成，就提前给dataKamar.ID_RUANG赋值，mat-select找不到匹配的选项就不会触发回显
• 可能存在值类型不匹配：比如数据库存储的ID_RUANG是字符串类型，而下拉选项的row.KODE_RUANG是数字类型，严格相等校验无法匹配成功

修复步骤 #

1. 清理HTML重复绑定 #

删除多余的[(value)]绑定，仅保留ngModel即可满足需求，同时兼容新增场景的默认空值逻辑：

<mat-form-field appearance="outline" > 
    <mat-select placeholder="Pilih Ruang " name="NAMA_RUANG" [(ngModel)]="dataKamar.ID_RUANG">
        <mat-option *ngFor="let row of dataRuang" [value]="row.KODE_RUANG">{{row.NAMA_RUANG}}</mat-option>
    </mat-select>
</mat-form-field>

2. 调整编辑赋值逻辑，保证时序正确 #

首先确保页面初始化阶段就调用getRuang()加载下拉选项，如果存在下拉未加载完成就触发编辑的场景，增加加载判断：

editItem(element: any){
    const tempEditData = _.cloneDeep(element)
    this.isEdit = true
    // 下拉选项已加载直接赋值
    if(this.dataRuang?.length){
        this.dataKamar = tempEditData
        // 如果其他逻辑还要用到selected1变量，同步赋值即可
        this.selected1 = tempEditData.ID_RUANG
    } else {
        // 未加载则先请求接口再赋值
        this.api_ruang.baca().subscribe((result: any)=> {
            this.dataRuang = result;
            this.dataKamar = tempEditData
            this.selected1 = tempEditData.ID_RUANG
        })
    }
}

3. 统一值类型 #

保证dataKamar.ID_RUANG和row.KODE_RUANG的类型完全一致，例如下拉加载时统一转成数字类型：

getRuang(){
    this.api_ruang.baca().subscribe((result: any)=> {
        this.dataRuang = result.map(item => ({
            ...item,
            KODE_RUANG: Number(item.KODE_RUANG)
        }));
    })
}
// 编辑赋值时同步转类型
editItem(element: any){
    const tempEditData = _.cloneDeep(element)
    tempEditData.ID_RUANG = Number(tempEditData.ID_RUANG)
    // 后续赋值逻辑同上
}

4. 新增场景初始化 #

触发新增操作时重置绑定值即可实现默认空值：

initAdd(){
    this.dataKamar = {ID_RUANG: null}
    this.selected1 = null
    this.isEdit = false
}

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