Привязки не определены, когда внутри ngIf или других директив Angular 2

Question

В настоящее время это одностороннее связывание показывает неопределенное, если я не переместу тег компонента из всех ngIf или любой другой директивы по этому вопросу. Почему он это делает и как лучше всего обойти это, чтобы он все еще работал, не перемещая его? В частности [columnDefinitions]

<h1 class="m-0 mr-2" *ngIf="editObj !== class">
    <div class="class-detail-header d-flex justify-content-between align-items-center">
      <span>{{ class.Description }}</span>
      <div class="csv-buttons d-flex justify-content-around">
        <app-csv-buttons [onValidate]="validateStudent" [onImportRow]="importStudent" [columnDefinitions]="[
           { name: 'Name', isRequired: true },
           { name: 'ExternalID', isRequired: false }
         ]"></app-csv-buttons>
      </div>
    </div>
  </h1>

import { Component, OnInit, Input } from '@angular/core';

import { BaseComponent } from '../base/base.component';
import { Class } from '../data/class'


@Component({
  selector: 'app-csv-buttons',
  templateUrl: './csv-buttons.component.html',
  styleUrls: ['./csv-buttons.component.scss']
})
export class CsvButtonsComponent extends BaseComponent implements 
OnInit {
  @Input() onValidate: (row: any) => string;
  @Input() onImportRow: (row: any) => Promise<void>;
  @Input() columnDefinitions: { name: string, isRequired: boolean, 
  validate?: (value: any) => string }[];


  ngOnInit() {
    console.log(this.columnDefinitions)
  }