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';本身设置数据绑定的值，而不是导入它的模块。

Answer 2

您缺少一些可能与其他导入共享的重要模块，例如

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

您可以看到dropdown组件的demo。

Answer 3

首先你需要添加：

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

在例如：xyz 的另一个组件中，将其导入模块中。比，

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

here [items] ...必须是您在组件类中使用@Input提及的目标属性名称，而 =“items”应该是您在xyz组件类中提及的属性名称。

Angular 2 @input数据没有正确绑定

父模块：

模块html：

组件：

3 个答案: