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

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

checkbox-list.component.ts

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { CheckboxItem } from '../../model/checkbox';
 import { NgModel } from '@angular/forms';
 import { filter } from 'rxjs/operator/filter';

 @Component({
     selector: 'app-checkbox-list',
     templateUrl: './checkbox-list.component.html',
     styleUrls: ['./checkbox-list.component.css']
 })
 export class CheckboxListComponent implements OnInit {
     @Input() list: CheckboxItem[];
     @Input() name: string;
     @Input() colNum: number = 6;
     @Output("selectChange") onChange: EventEmitter<any> = new EventEmitter<any>();

     constructor() { }

     ngOnInit() {
     }
     changeSelected() {
         let filters = this.list.filter(x => x.checked);
         let ids = [] as any[];
         for (var i = 0; i < filters.length; i++) {
             ids.push(filters[i].id);
         }

         this.onChange.emit({ value: ids, name: this.name });
     }
 }

使用的时候，直接在module中添加引用：

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';

 import { CheckboxListComponent } from '../components/checkbox-list/checkbox-list.component';
 ......
 export const routes = [
     { path: '', component: OrderBuyDataComponent, pathMatch: 'full' }
 ];

 @NgModule({
     imports: [FormsModule
         , CommonModule
         , ...],
     declarations: [CheckboxListComponent
         , ...],
     providers: []
 })
 export class OrderModule {
     static routes = routes;
 }

因为写的比较仓促，所以一些代码还没整理好。