Angular2组件无法访问模板内的类属性

Question

我有以下代码： 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>

波纹管是另一个组件contract-type.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'contract-type',
  template: `
    <div *ngIf="contractTypes">
      <label class="form-control-label" for="contractType">Contract Type</label>
      <select id="contractType" name="contractType" required [(ngModel)]="job.contractType" class="form-control">
         <option value="0">Select an item</option>
         <option *ngFor="let contractType of contractTypes" value="contractType.name_en">{{ contractType.name_en }}</option>
       </select>
    </div>
    `
})

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

控制台是这样的： 但是在浏览器上没有任何下拉列表，并且如果我从div中删除*ngIf ，则显示错误can not read property <contractTypes> of undefined 。 故事就是这样，我需要在create.template.html从api响应填充的下拉列表。

Answer 1

在组件之间添加交互，如下所示：在父组件“ create.template.html”内部：

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

在您的conract-type.component.ts内部：首先导入Input ：从'@ angular / core'导入{Component，Input}； 然后将您的组件类更改为此：

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