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

Я работаю над приложением 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);.

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

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

Ссылка, которую я взял:

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


angular twitter-bootstrap ng-bootstrap
person Akshay Khale    schedule 09.11.2016    source источник
comment
Что вы имеете в виду под не работает? Опубликуйте свою ошибку, пожалуйста.   -  person Stefan Svrkota    schedule 10.11.2016
comment
извините, я напутал, позвольте мне отредактировать вопрос @StefanSvrkota   -  person Akshay Khale    schedule 10.11.2016
comment
вопрос обновлен, @StefanSvrkota   -  person Akshay Khale    schedule 10.11.2016

Ответы (1)


arrow_upward
2
arrow_downward

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

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

export class NgbdTypeaheadBasic implements OnInit {

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

}

Вы должны проверить хуки жизненного цикла Angular 2.

person Stefan Svrkota    schedule 09.11.2016
comment
сработало безупречно, спасибо, на самом деле я не хотел console.log значения, это было для тестирования, я собираюсь назначить параметр для свойства состояний, которое также работает нормально... - person Akshay Khale; 10.11.2016
comment
просто быстрый вопрос, есть ли способ передать значение из подкомпонента в родительский компонент??? - person Akshay Khale; 10.11.2016
comment
@AkshayKhale Для этого вам нужно использовать EventEmitter. Я предлагаю прочитать эту статью, она действительно хорошо объяснена на самых простых примерах: themarketingtechnologist.co/ - person Stefan Svrkota; 10.11.2016
comment
уже реализовано по той же ссылке ссылки, но он перестает работать случайным образом, не знаю, что не так, еще раз спасибо... - person Akshay Khale; 10.11.2016
comment
@AkshayKhale Напишите еще один вопрос, если у вас возникнут какие-либо проблемы. - person Stefan Svrkota; 10.11.2016