ng2- свойство компонента привязки теперь работает

Question

Я работаю над приложением Angular 2, в котором я создал компонент с именем JobComponent с свойством candidate_types и пытается связать свойство с привязкой атрибута к компоненту NgbdTypeaheadBasic, но он не работает, Я не знаю, почему, ниже файлы.

job.module.ts

import { NgbdTypeaheadBasic } from './typehead.component'; 
import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { JobComponent } from './job.component'; 
@NgModule({ 
    imports:  [ BrowserModule, FormsModule ], 
    declarations: [ JobComponent, NgbdTypeaheadBasic], 
    bootstrap: [ JobComponent ] 
}) 


export class JobModule { } 

job.component.ts

import { Component } from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 

@Component({ 
    selector : 'job_block', 
    template : "<ngbd-typeahead-basic [options]='candidate_types'></ngbd-typeahead-basic>", 
}) 

export class JobComponent { 
    candidate_types:any=['air', 'ocean']; 
} 

typehead.component.ts

import {Component,Input} from '@angular/core'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 

@Component({ 
    selector: 'ngbd-typeahead-basic', 
    templateUrl: './partials/third-party/typehead.html' 
}) 
export class NgbdTypeaheadBasic { 
    public model: any; 

    states:any; 

    @Input() options:any; 

    constructor() { console.log(this.options); } 

    search = (text$: Observable<string>) => 
    text$ 
     .debounceTime(200) 
     .distinctUntilChanged() 
     .map(term => term.length < 2 ? [] 
     : this.states.filter(v => new RegExp(term, 'gi').test(v)).splice(0, 10)); 
} 

typehead.html

<input type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" /> 

Когда я запустил приложение все компоненты становятся оказанными надлежащим образом без каких-либо ошибок, но я получаю undefined для console.log(this.options);

Я пытаюсь реализовать Угловое 2 Bootstrap Typehead компонента:

https://ng-bootstrap.github.io/#/components/typeahead

Отметку, что я взял:

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

Answer 1

Вы получаете undefined, потому что вы пытаетесь напечатать options в constructor и учитывая, что @Input(), пока не передается от родительского компонента в тот момент. Реализовать OnInit и распечатать его там, вы увидите, что он будет работать:

import { OnInit } from '@angular/core'; 

export class NgbdTypeaheadBasic implements OnInit { 

ngOnInit() { 
console.log(this.options); 
} 

} 

Вы должны проверить Angular 2 Lifecycle Hooks.