Question

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

到目前为止我的代码：

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

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

我该如何解决这个问题？我采取了错误的做法吗？

更新

updateItem只是修改数组。（我正在使用firebase / angularfire2 btw。）

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

所以数据本身是：items: FirebaseListObservable<any[]>;，只包含键和名称属性（都是字符串）。

更新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
    }
  }
})

然后在itemsCopy中使用*ngFor。

Angular2事件：keyup退出输入

1 个答案: