javascript - Angular2事件: keyup exits input

Question

我有一个输入元素绑定(bind)到我的组件的属性，当我更改输入字段中的文本时，该属性应该更新。

到目前为止我的代码:

<input type="text" #updatetext [value]="item.name" (keyup)="updateItem(item.$key, updatetext.value)" />

问题是，当我击键时，该元素失去焦点，意味着我必须再次单击它才能继续输入。

我该如何解决这个问题？我是否采用了错误的方法？

更新

updateItem只需修改数组即可。 (顺便说一句，我将它与 firebase/angularfire2 一起使用。)

updateItem(key: string, newText: string) {
    this.items.update(key, { name: newText });
}

所以数据本身是:items: FirebaseListObservable<any[]>;仅包含 key 和 name 属性(均为字符串)。

更新2这并不是因为整个 dom 元素被重新创建，或者至少不应该根据 the docs 重新创建。 (参见“变更传播”)。

Answer 1

我假设您正在使用 *ngFor 创建输入。

如果 updateItem() 修改 *ngFor 迭代的数组，则可能会重新创建该元素，这就是您的元素失去焦点的原因(它现在是一个不同的元素)。

简单版本(根据您的数据的具体情况，这可能不起作用)

items.subscribe(response => {
  for(item in response) {
    var found = this.itemsCopy.find((copy) => copy.name == item.name); 
    if(found.length) {
      found[0].value = item.value
    }
  }
})

然后在*ngFor中使用itemsCopy。