Angular 2 Material - 为什么我的输入被取消选择？答案

【问题标题】：Angular 2 Material - Why is my input deselected?Angular 2 Material - 为什么我的输入被取消选择？
【发布时间】：2017-11-18 11:54:27
【问题描述】：

我有一个奇怪的问题。

我正在使用 Angular CLI，并且我已经添加了 Material 2。我用ngfor 创建了一些输入并将它们绑定到ngmodel。一切正常。

但是每当我输入一些东西时，输入就会被取消选择。

这是组件的 HTML 代码：

<md-input-container class="treatments" *ngFor="let t of treatment; let i = index">
    <input mdInput placeholder="treatment {{ i + 1 }}" 
      value="{{ t[i] }}" name="treatment_{{ i + 1 }}" [(ngModel)]="treatment[i]">
</md-input-container>

当我删除 ngmodel 时，它确实可以 100% 工作。

【问题讨论】：

你能展示一下治疗的样子吗？
@Nehal 它看起来像 [“treatment 1”, “treatment 2”, “etc...” ] 就是这样......（不是一个相关的问题 - 我如何才能从堆栈溢出的移动版本 - )。谢谢
@TheSnake620 提供的任何一个答案如何？ :)
@AJT_82 我已经用 trackBy 测试了第二个，amd 删除了值 attr，并且确实工作得很好（如果我没有删除值 attr，它只写 2 个字母，然后我写的任何字母它删除了它之前的字母），我稍后会测试第一个答案。

标签： angular angular-material

【解决方案1】：

您正在对原始类型的 Array 进行迭代，因此它们是按值进行比较的。当您更改处理方式（即t）时，所有值都会被破坏并创建新值，这会导致字段失去焦点。这可以通过使用trackBy 来解决，它通过索引跟踪处理，并且只销毁和重新创建您正在修改的处理。

所以添加trackBy:

<md-input-container class="treatments" *ngFor="let t of treatment; 
    let i = index; trackBy:trackByFn">

并在 TS 中添加函数：

trackByFn(index, treatment) {
  return index;
}

【讨论】：

【解决方案2】：

问题是您试图将ngModel 绑定到原始值。您可以通过在treatment 声明之前添加@Input() 来解决取消选择问题。

@Input() treatment: string[] = [ "treatment 1", "treatment 2"];

但它不会更新数组中的值。如果要更新值，ngModel 需要与对象属性绑定。我在Plnkr 中添加了这两个示例。

有关更多信息，请参阅此 SO 问题 Angular2 ngModel inside of ngFor

【讨论】：

我真的不明白你为什么提到@Input，因为问题不在于通过组件传递数据......无论如何，值得一提的是value="{{ t[i] }}"也是一个问题，它与那里的ngModel 冲突。
@Nehal 你的方式不起作用，我必须使用 trackBy，顺便说一句，谢谢你的帮助 :)。