在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)
  }