<input type =“checkbox”/>如何点击并显示使用angular2进行检查

Question

我已阅读link（复选框部分），here is demo，这是一个很好的解决方案。

但如果我有大约100个复选框，我该如何重写代码？

它将用于表插件（我的同事写的）

class ProductList{
    idNO:number;
    id:string;
    name:string;
    aaa:string;
    bbb:string;
    ccc:string;
    ddd:string;
}
@Injectable()
export class MyTableService {
    selectedRow: any;
}

@Component({
        selector:'tbody',
        template: `
        <tr *ngFor="let trow of tableinfo.tbody" (click)="onClick(trow)" [class.selected]="trow === selectedDataList">
            <td><input type="checkbox" ></td>
            <td>{{trow.idNO}}</td>
            <td>{{trow.id}}</td>
            <td>{{trow.name}}</td>  //if checked, it will show trow.name
            <td>{{trow.aaa}}</td> 
            <td>{{trow.bbb}}</td>
            <td>{{trow.ccc}}</td>
            <td>{{trow.ddd}}</td>
        </tr>
        `,
    })
    export class myTableTemplate implements OnInit {
        @Input() tableinfo: any;
        selectedDataList: ProductList;

        error: any;

        constructor(private router: Router,
            private myTableService: MyTableService) { }

        ngOnInit() {
            // console.log(this.tableinfo);
        }
        onClick(trow: any) {
            this.selectedDataList = trow;
            this.myTableService.selectedRow = trow;
        }

    }

@Component({
    selector: 'my-dialog-info',
    directives: [TablePlugin],
    providers: [MyTableService, DialogPlugin],
    template: `
    <div class="dialog-info">
        <div class="m-info-layout">
            <div class="m-info-left m-product-left">
                <my-table [table]="producttable" [options]="options" (click)="onClick($event)"></my-table>
            </div>
            <div class="m-info-right">
                <div *ngIf="dataDetailService.name"> 
                    <ul *ngFor="let showProduct of productNameList;let i = index">
                        <li>{{showProduct}}</li>
                    </ul>
                </div>
                <button (click)="confirmProduct()">Proceed</button>
                <button (click)="onClose()">Cancel</button>
            </div>
        </div>
    </div>
    `,
})
export class myProductDialogTemplate implements OnInit {
    @ViewChild(DialogPlugin) dialogPlugin: DialogPlugin;
    selectedRow: any;
    productNameList: any[];
    producttable: any = {
        thead: [
            {
                id:'selectBox',
                name:''
            },{
                id: 'idNO',
                name: 'idNO',
            },{
                id: 'id',
                name: 'ID',
            },{
                id: 'name',
                name: 'commonName',
            },{
                id: 'aaa',
                name: 'goodsname',
            },{
                id: 'bbb',
                name: 'factory',
            },{
                id: 'ccc',
                name: 'ccc',
            },{
                id: 'ddd',
                name: 'ddd',
            }
        ],
        pageSize: 20,
        url: "/api/v1/productList?pageIndex={currentPage}&pageSize={pageSize}",
        tbodyPath: "productDtoList"
    };
    options = {
        tableTemplate: myTableTemplate
    }
    constructor(
        private router: Router,
        private dialogModel: DialogModel,
        private dataDetailService:DataDetailService,
        private myTableService: MyTableService
    ) { }

    ngOnInit() {

    }

}