使用复选框获取ngFor Angular2形式的元素

时间:2018-08-14 08:04:50

标签: angular

我正在尝试在Angular2中获取一个元素。

问题是我说对了,但我应该将ID作为我的元素->

HTML

Command

Component.ts

<form #form="ngForm" (ngSubmit)="save()">
<div class="row">
    <table class="table">
        <tbody>
            <tr *ngFor="let data of params">
                <td class="left">{{data.name}}</td>
                <td class="left">"{{data.surname}}"</td>
                <td>
                    <div class="toggle-switch" >
                    <input type="checkbox" id="{{data.id}}" [value]="data.id" name="{{data.id}}" [(ngModel)]="selectParam">
                    <label for="{{data.id}}"></label>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

在这里,我从复选框中将“ selectParam”与NgModel链接起来,得到 public params: Object; public selectParam: string ; ngOnInit() { this.fetchData(); } private fetchData() { const url = 'http://localhost:8080/get'; this.service.get(url).subscribe( data => { this.params = data; } ); } public save() { console.log( "id" , this.selectParam); } ,但是在console.log中却没有得到ID,我得到的是True还是false ...

1 个答案:

答案 0 :(得分:0)

复选框的值始终为true或false

您需要更改

public selectParam: string; => public selectParam: string[];

然后使用:

(click)="checkboxStateChanged($event, data.id)"

其中

checkboxStateChanged($event, id){
    if($event){
        this.selectParam.push(id)
    }else{
        this.selectParam = this.selectParam.filter(x => x != id)
    }
}

您将在selectParam中将所有项目更改为true