Dynamic checkboxes not loading

I have a group of checkboxes of 'business units' loaded from the database upon which I want to perform validation.

As I have it setup at the moment they are not displaying even though the values did return from the db successfully.

ngOnInit() {
    this.commServe.getBusinessUnitsOnly().subscribe((data) => {
        this.businessUnits = data;
    },
        (error) => {
            this.errorMessage = <any>error;
        })
}

the formgroup is initialized in the constructor

this.registrationForm = fb.group({

        "firstName": new FormControl('', [Validators.required]),
        "lastName": new FormControl('', [Validators.required]),
        "password": new FormControl('', [Validators.required]),
        "confirmPassword": new FormControl('', [Validators.required]),
        bUnits: this.fb.array(
            this.businessUnits.map(() => this.fb.control('')),
            CustomValidators.multipleCheckboxRequireOne
        )

    })

this is the markup

 <div formArrayName="bUnits">
    <div class="checkbox"*ngFor="let unit of registrationForm.controls.bUnits.controls; let i = index;">
      <label><input type="checkbox" #instance  formControlName="businessUnits[i].BuName" (click)="getCheckBoxValue(instance.checked, businessUnits[i].BuName)"></label>
    </div>
  </div>

Why are the values not displaying? How can I go about in rectifying this?

Thanks