记angular7开发学习之复选框选中数据获取/回显

本文链接：https://blog.csdn.net/Wy_Vae/article/details/109462412

ts文件：

1.定义数组

GATEs = [
    {
        OTHERCODE_CD:"1",
        OTHERCODE_NM:"为船舶提供生活品",
        SELECTED:false
    },
    {
        OTHERCODE_CD:"0",
        OTHERCODE_NM:"其他服务",
        SELECTED:false
    }
];

2.复选框选中数据获取

saveCargoList() {//保存方法

    var checkboxAll = ""; //选中的值
    this.GATEs.map(item=> {
        if (item.OTHERCODE_CD !== null) {
            if(item['SELECTED'] == true){
                checkboxAll += item.OTHERCODE_CD + ',';
            }
        }
    });
    console.log(checkboxAll);
    this.editForm.controls['SERVICE_TYPE'].setValue(checkboxAll);
}

3.修改数据回显

//将从后台查出的值，放到回显页面里
this.listData = this.mainStore.getDatas()[0];
let SERVICE_TYPE = this.listData['SERVICE_TYPE'];
console.log(SERVICE_TYPE);
if(SERVICE_TYPE.length>0){
    let myvalue = SERVICE_TYPE.split(",");
    this.GATEs.forEach((v, n) => {
        let st = myvalue.includes(v.OTHERCODE_CD);
        if (st) {
            v.SELECTED = true;
        }
    });
}

html文件

1.页面数据展示

<div class="col-sm-12 col-md-3 col-lg-3 edit_form">
    <div class="row align-items-center mt_15">
        <div  title="供应商服务类型">供应商服务类型</div>
        <div class="col-sm-8 col-md-8 col-lg-8 pl_0 pr_0">
            <div class="checkbox-custom" *ngFor="let gate of GATEs;let i = index;" style="padding-left: 18px;">
                <input type="checkbox"  id="gate{{i}}" [value]="gate.OTHERCODE_CD"  [(ngModel)]="gate.SELECTED">
                <label for="gate{{i}}">{{gate.OTHERCODE_NM}}</label>
            </div>
        </div>
    </div>
</div>