首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ng2-组件属性绑定不起作用

ng2-组件属性绑定不起作用
EN

Stack Overflow用户
提问于 2016-11-10 06:32:29
回答 1查看 193关注 0票数 1

我正在开发一个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

我引用的参考资料:

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40517110

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档