ionic5.x复选框ion-checkbox动态加载
技术上的东西说太多都是虚的,咱们直接上代码说明问题。
html代码
<!-- Checkboxes in a List --> <ion-list> <ion-item *ngFor="let entry of form"> <ion-label>{{entry.val}}</ion-label> <ion-checkbox item-start slot="start" [(ngModel)]="entry.isChecked" [(ngModel)]="isToggled" (ionChange)='getSelectValue(entry.val)'></ion-checkbox> <input type="checkbox" /> </ion-item> </ion-list>
js声明两个变量 form = [ { val: 'Pepperoni', isChecked: true , color: 'info'}, { val: 'Sausage', isChecked: false , color: 'info'}, { val: 'Mushroom', isChecked: false , color: 'info'} ]; isToggled: boolean;
js方法 getSelectValue(val: string): void { // tslint:disable-next-line:no-console console.log('复选框获取的bool' + this.isToggled + 'value' + val ); }
效果图
哇咔咔,完美实现复选框。