Angular 2 + ngrx/store:单向绑定到 <input>

Sky*_*ler 6 ngrx angular

[ngModel]当通过上使用单向绑定时<input>,在输入中键入字符始终会将字符添加到 的<input>值中。问题是,如果[ngModel]表达式继续返回其现有值,则该<input>值不会刷新。

这是一个简单的例子:

@Component({
  selector: 'my-component',
  template: `
    <input type="text" [ngModel]="foo.bar" />
  `
})
export class MyComponent {
  private foo = {
    bar: 'baz'
  };
}
Run Code Online (Sandbox Code Playgroud)

我希望无论用户输入如何,输入始终显示“baz”,但事实并非如此。

我寻找这种行为的原因是针对 ngrx/store/redux 应用程序,其中 an<input>的值应由单向流动的状态确定。我在 Plunker 上创建了一个示例用例,其中 Misko Hevery 的描述不应该是可编辑的。模型确实没有改变,但<input>无论用户输入什么,都会显示出来。

在“No trackBy”部分,它可以正常工作,但这只是因为 Angular 正在重绘所有 DOM 元素,这会强制进行适当的重新评估(但这不是解决方案)。添加disabledreadonly属性<input>对我来说不是一个可接受的答案,因为组件应该不知道不允许更改此字段的潜在复杂状态逻辑。

我在 React Redux 中看到了这种行为,我想知道如果我们无法阻止用户改变自己的视图,我们如何在 Angular 2 中使用单向绑定。

Raj*_*jiv 0

@Component({
  selector: 'my-component',
  template: `
    <input type="text" [value]="foo.bar" />
//[ngModel] is for two way binding
  `
})
export class MyComponent {
  private foo = {
    bar: 'baz'
  };
}
Run Code Online (Sandbox Code Playgroud)