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