Angular 2 @輸入數據未正確綁定

Question

父模塊：

import {NgModule} from '@angular/core';
import {SharedModule} from "app/shared/shared.module.ts";

import {HeaderComponent} from './header.component';
import {UserinfoComponent} from './userinfo.component';
import {SearchComponent} from './search.component';
import {DropdownComponent, DropdownValue} from '../../forms/dropdown.component';

@NgModule({
    declarations: [
      HeaderComponent,
      UserinfoComponent,
      SearchComponent,
      DropdownComponent,
    ],
    imports     : [SharedModule],
    exports     : [HeaderComponent],
})

export class HeaderModule {
  items: DropdownValue[] = [
    {value: '1', label: 'test 1'},
    {value: '2', label: 'test 2'}
  ];
}

模塊html：

<div class="navbar dark-bg remove-bottom-margin flex-container">
    <search></search>
    <div class="flex-item">
        <dropdown [items] = "items"></dropdown>
    </div>
    <userinfo></userinfo>
</div>

零件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

export class DropdownValue {
  value: string;
  label: string;

  constructor(value: string, label: string) {
    this.value = value;
    this.label = label;
  }
}

@Component({
  selector: 'dropdown',
  template:  `
    <select class="form-control" [(ngModel)]="selectedValue.value" (change)="onChange($event)">
      <option *ngFor="let item of items" [value]=item.value>{{item.label}}</option>
    </select>
  `,
})

export class DropdownComponent {
  selectedValue: DropdownValue = new DropdownValue('2', '');

  @Input()
  items: DropdownValue[];

  @Input()
  value: string[];

  @Output()
  valueChange: EventEmitter<any> = new EventEmitter();

  onChange(event: any) {
    console.log(event.target.value);
    this.valueChange.emit(event.target.value);
  }
}

如果我在組件中設置測試數據並刪除數據綁定-它會起作用。
我什至嘗試過類似@input items: string這樣的簡單操作，並將其設置為模板中的純文本。 仍未定義。

我想念的是什么-我看了看例子，看不出有什么不同。
您是否需要導入模塊中特定的內容以使數據綁定起作用？

Answer 1

似乎我實際上必須為import {HeaderComponent} from './header.component'; databind設置值import {HeaderComponent} from './header.component'; 本身，而不是導入它的模塊。

Answer 2

您缺少一些可能與其他導入共享的重要模塊，例如

import {SharedModule} from "./app/shared/shared.module.ts";

您可以看到dropdown組件的演示 。

Answer 3

首先，您需要添加：

items: DropdownValue[] = [ {value: '1', label: 'test 1'}, {value: '2', label: 'test 2'} ];

在eg：xyz的另一個組件中，並將其導入您的模塊中。 比，

<dropdown [items] = "items"></dropdown>

這里[items] ...必須是您在組件類中使用@Input提及的目標屬性名稱，而=“ items”應該是您在xyz組件類中提及的屬性名稱...