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组件不能访问类的属性里面的模板

回答

相关问题