angular - 以Angular 6反应形式在多个列中显示复选框

Question

引导以在 3 列中显示动态复选框

我正在按照这个示例创建一个跨 3 列的动态复选框列表，目前正在尝试使用静态数据使其工作，但稍后将从服务中获取。我不确定什么是不正确的。这是它们的显示方式。如何获取数据而不是对象 模板：

<div class="col-xs-4" formArrayName='options'
     *ngFor="let option of ReportsForm.controls.options.controls; let i = index">
    <input [formControlName]="i" type="checkbox" /> {{options[i].option}}
</div>
<button>submit</button>

零件：

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { asEnumerable } from 'linq-es2015';
import { ReportingService } from '../../services/reporting.service';
import { NotificationsService } from 'angular2-notifications';
import { ExcelService } from '../../services/excel.service';
@Component({
  selector: 'app-report-dyn',
  templateUrl: './report-dyn.component.html',
  styleUrls: ['./report-dyn.component.scss']
})
export class ReportDynComponent implements OnInit {
    ReportsForm: FormGroup;

    options = [
        { id: 1, option: 'chk 1' },
        { id: 2, option: 'chk 2' },
        { id: 3, option: 'chk 3' },
        { id: 4, option: 'chk 4' },
        { id: 5, option: 'chk 5' },
        { id: 6, option: 'chk 6' },
        { id: 7, option: 'chk 7' },
        { id: 8, option: 'chk 8' },
        { id: 9, option: 'chk 9' },
        { id: 10, option: 'chk 10' },
        { id: 11, option: 'chk 11' },
        { id: 12, option: 'chk 12' },
        { id: 13, option: 'chk 13' },
        { id: 14, option: 'chk 14' },
        { id: 15, option: 'chk 15' },
        { id: 16, option: 'chk 16' },
        { id: 17, option: 'chk 17' },
        { id: 18, option: 'chk 18' }
    ]; 
    constructor(private formBuilder: FormBuilder) {
        ////trying 3 col approach
        const controls = this.options.map(c => new FormControl(true));

        this.ReportsForm = this.formBuilder.group({
            options: new FormArray(controls)
        });

        var groups = asEnumerable(this.options)
            .Select((option, id) => { return { option, id }; })
            .GroupBy(
            x => Math.floor(x.id / 3),
                x => x.option.option,
                (key, options) => asEnumerable(options).ToArray()
            )
            .ToArray();
    }
  ngOnInit() {
  }
}

标签： angularcheckboxmultiple-columnsdynamic-controls