Javascript 角度2组件可以'；无法访问模板内的类属性

我有以下代码：

post.component.ts

：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { JobsService } from '../jobs.service';

@Component({
  selector: 'job-post',
  templateUrl: './create.template.html',
  providers: [JobsService]
})

export class JobPostComponent {
  job: any = {};
  errorMessage: String;

  constructor(private _router:Router, private _jobsService:JobsService) {}

  create() {
    this._jobsService
      .create(this.job)
      .subscribe(createdJob => this._router.navigate(['/jobs', createdJob._id]), error => this.errorMessage = error);
  }
}

create.template.html

<h1>Post New Job</h1>
<form (ngSubmit)="create()" novalidate>
  <div class="form-group">
    <label for="isExtensible">Is Extensible</label>
    <input type="checkbox" required [(ngModel)]="job.isExtensible" name="isExtensible" id="isExtensible">
  </div>
  <div class="form-group">
    <label class="form-control-label" for="isOpenEnded">Open Ended</label>
    <input type="checkbox" required [(ngModel)]="job.isOpenEnded" name="isOpenEnded" id="isOpenEnded">
  </div>
  <div class="form-group">
    <contract-type></contract-type>
  </div>
</form>

控制台是这样的： 但在浏览器上，它不是任何下拉列表，如果我从div中删除

*ngIf

，它将显示一个错误

无法读取未定义的属性。
故事是这样的，我需要一个从api响应填充的下拉列表，在
create.template.html
中
 添加组件之间的交互，如下所示：
在父组件“create.template.html”中：

<contract-type [job]="job"></contract-type>

<contract-type [job]="job"></contract-type>

export class ContractTypeComponent {
  private contractTypes;
  @Input() job;
  constructor(private _http: Http) {
    this._http.get('/api/contractTypes')
     .subscribe((res)=>{
       this.contractTypes = res.json();
       console.log(this.contractTypes)
    });
  }
}