Angular 2 模型绑定到简单类型（字符串）不起作用

Question

我有一个带有字符串字段输入的简单组件：

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'mundo-input',
    template: `
        <input class="form-control"  [(ngModel)]="zeit"  />
    `
})
export class MundoInputComponent  {
    @Input() zeit: string;    
}

我是这样使用这个组件的：

<mundo-input [(zeit)]="myzeit"></mundo-input>

来自外部组件的 myzeit-属性被正确注入。当我手动更改值并在外部组件上按保存时，myzeit-属性具有旧值。

我将 zeit 的类型从字符串更改为 Hero class（就像在 NG2 教程中一样）并将输入的绑定更改为 zeit.name。双向数据绑定有效。

是否可以从外部组件绑定到属性类型的字符串？还是仅适用于复杂类型（classes）？

Answer 1

您需要向组件添加输出才能利用双向绑定：

@Component({
  selector: 'mundo-input',
  template: `
    <input class="form-control" [ngModel]="zeit"
               (ngModelChange)="onChange($event)" />
  `
})
export class MundoInputComponent  {
  @Input() zeit: string;    
  @Output() zeitChange:EventEmitter<string> = new EventEmitter();

  onChange(val) {
    this.zeitChange.emit(val);
  }
}

按照惯例，输出必须有 zeitChange 才能使用快捷方式 [(zeit)]="myzeit":

<mundo-input [(zeit)]="myzeit"></mundo-input>

在您的情况下，您只对 zeit 参数使用单向绑定。

看到这个 plunkr：https://plnkr.co/edit/snaM4y?p=preview。

Angular 2 模型绑定到简单类型（字符串）不起作用

Angular 2 Modelbinding to simpletype (string) not working

types

model-binding

typescript

angular