【问题标题】:How to bind checkbox in angular 7?如何在 Angular 7 中绑定复选框?
【发布时间】:2020-02-11 02:50:13
【问题描述】:
<form #checkboxForm="ngForm" name="checkboxForm">
        <table><th>Some Group</th>
            <th>Some Status</th>
             <tr>
                    <td><label for="checkbox" class="checkbox">
                            <input id="checkbox_group" type="checkbox" value="{{groupData[0].Id}}"  [(ngModel)]="groupData[0].checked"
                                [ngModelOptions]="{standalone: true}" (change)="groupNotSelected()"
                                checked /><i class="skin"></i><span>{{groupData[0].GroupDesc}}</span>
                        </label></td>
                        <td>
                             <span>{{groupData[0].GroupStatus}}</span>
                        </td>
                    </tr>    
        </table>
        <a style="border-radius: 25px;border:1px solid #CCC;padding:5px;text-decoration: none" (click)="submitdata()">Submit to myPrice</a>
        </form>

带有数据绑定的表单

下面是我绑定请求细节并将请求详细信息传递给后端 api 的函数。

submitdata() {
//console.log(this.groupData[0].checked);

let refreshReq = {
"action":"submit",
"Id": this.groupData[0].Id,
"dataIds": [this.groupData[0].Id]
}

this.some.postData(api, refreshReq)
    .subscribe(data => {
            console.log(data);
    }, error => {

    });

}

问题是我如何绑定数据,以便在选择复选框时我只能传递选定的复选框值。

【问题讨论】:

标签: angular angular7 angular2-forms


【解决方案1】:
submitdata() {
//console.log(this.groupData[0].checked);
let request = this.groupData.filter(p => p.checked)
for(let j=0;j<request.length;j++)
{
  this.selGroups = request[j].Id;
  this.selsolid = request[j].SolutionId;
  console.log(this.selGroups);
}

console.log(this.selGroups);
//console.log(request);
let refreshReq = {
"action":"submit",
"SolutionId": this.selsolid,
"Ids": [this.selGroups],
"reqDesc" :"INR"
}

this.some.postData(api, refreshReq)

    .subscribe(data => {
            console.log(data);
    }, error => {

    });}

【讨论】:

    猜你喜欢
    • 2015-04-11
    • 2017-06-02
    • 2021-06-10
    • 2020-02-09
    • 2016-05-05
    • 2019-05-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多