Angular2 Komponente kann nicht Klasseneigenschaft innerhalb Vorlage zugreifen

Question

Ich habe den folgenden Code: 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> 

und unten eine andere Komponente 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) 
     }); 
    } 
} 

ist und die Konsole ist wie folgt: Aber im Browser ist es kein Dropdown, und wenn ich *ngIf von div entferne es zeigt einen Fehler can not read property <contractTypes> of undefined. Und Geschichte ist so, dass ich eine Dropdown-Liste, die von API-Antwort, innerhalb der create.template.html bevölkert.

Answer 1

hinzufügen Interaktion zwischen Komponenten wie folgt aus: in Ihrer Stammkomponente 'create.template.html':

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

und in Ihrem conract-type.component.ts: ersten Import Input: Import {Component, Input} aus "@ eckig/Kern"; Ändern Sie dann Ihre Komponentenklasse wie folgt:

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