Angular5中提取公共组件之checkbox list

因为工作原因,需要使用到checkbox list多选项功能。

一直在尝试在checkbox组件中添加NgModel的属性,但是只能在单个checkbox复选框上使用,checkbox list就没办法了。

好吧,其实是想差了。

因为是对checkbox的div添加ngFor的循环,所以每个checkbox都相当于list中的item,直接在item的属性,多加一个checked就好了,然后使用选中的list时filter checked==true就好了。

checkbox-list.component.html

1 <div *ngIf="list" class="form-row"> 2 <div class="col-{{colNum}} mb-2" *ngFor="let item of list"> 3 <div class="form-check abc-checkbox abc-checkbox-primary"> 4 <input class="form-check-input" type="checkbox" [value]="item.id" [(ngModel)]="item.checked" (change)="changeSelected()" id="{{name}}_{{item.id}}"> 5 <label class="form-check-label" for="{{name}}_{{item.id}}"> 6 {{item.name}} 7 </label> 8 </div> 9 </div> 10 </div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdjwy.html