我正在开发一个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" />
当我启动应用程序时,所有组件都可以正常渲染,没有任何错误,但我得到的是console.log(this.options);
版的undefined
我正在尝试实现Angular 2 Bootstrap Typehead组件:
https://ng-bootstrap.github.io/#/components/typeahead
我引用的参考资料:
发布于 2016-11-10 06:48:54
你会得到undefined
,因为你正在尝试在constructor
中打印options
,并且考虑到它是@Input()
,此时它还没有从父组件传递过来。实现OnInit
并将其打印在那里,您将看到它将会工作:
import { OnInit } from '@angular/core';
export class NgbdTypeaheadBasic implements OnInit {
ngOnInit() {
console.log(this.options);
}
}
你应该去看看Angular 2 Lifecycle Hooks。
https://stackoverflow.com/questions/40517110
复制相似问题