我正在尝试创建一个表,该表具有多个具有不同状态的复选框(有些为真,有些为假)。
在这个表中,我有“保存”按钮来获取他状态的所有元素。
代码是这样的:
<form #form="ngForm" (ngSubmit)="save(form)">
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>{{'name-placeholder' | translate}}</th>
<th>{{'action' | translate}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let card of cardsDashboard;let i=index">
<td>{{card.text}}</td>
<td>
<div class="form-check">
<label>
<input type="checkbox" name="checkDashboard" [(ngModel)]="card[i]"
(ngModelChange)="card[i].activate==true?'true':'false'" [checked]="card.activate">
<span class="label-text"></span>
</label>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-toolbar pull-right ">
<div class="btn-group">
<button class="btn btn-primary">{{'save' | translate}}</button>
</div>
</div>
</form>
第一个问题:“保存”按钮不会更新元素的状态。
第二个问题:复选框不显示默认状态。复选框为空。
所以问题是:如何使用复选框执行 ngfor 并显示状态并更新它?
----更新:阵列-----
0:
activate: true
cardType: 1
id: 1
text: "Contadores"
__proto__: Object
1: {id: 2, text: "Alarmas", cardType: 2, activate: false}
2: {id: 3, text: "Consumo día anterior", cardType: 3, activate: false}
3: {id: 4, text: "Consumo del mes anterior", cardType: 4, activate: false}
4: {id: 5, text: "Elementos instalados la ultima semana", cardType: 5, activate: false}
5: {id: 6, text: "Elementos que han comunicado hoy", cardType: 6, activate: false}
更新我觉得有点傻::glups::
[(ngModel)]="card[i].activate" //<--WRONG
[(ngModel)]="card.activate" //<--OK
忘记(ngModelChange)和[检查]。
看问题,你真的没有再赚
通常,我们可以做两件事:
数组中的值,例如 values=["uno","tres"] 或 values=[true,false,true,false] "checked options"=["uno","dos","tres" 列表,"cuatro"]
所以,在一个数组中,我们可以有
this.options.forEach((x,index)=>{
this.card[index].activate=value[index]
//or
// this.card[index].activate=value.indexOf(x)>=0
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句