отображение флажков в нескольких столбцах в Angular 6 реактивной форме

Question

Bootstrap для отображения динамических флажков в 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() {
  }
}