Angular2組件不能訪問類的屬性裏面的模板

我有以下代碼： post.component.ts：Angular2組件不能訪問類的屬性裏面的模板

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。故事是這樣的，我需要一個下拉列表，填充從API響應，在create.template.html內。

來源

2017-02-16 jones

您的組件之間的交互添加像這樣：你父組件 'create.template.html' 裏面：

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

和裏面的conract-type.component.ts：首次進口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) 
    }); 
    } 
}

來源

2017-02-16 05:46:20

Angular2組件不能訪問類的屬性裏面的模板

回答

相關問題