更改数字列表时，屏幕上的下一个值会发生变化。

17 浏览
0 Comments

更改数字列表时，屏幕上的下一个值会发生变化。

在Angular 2中，我如何在使用NgFor的重复列表中实现双向绑定与NgModel。下面是我的plunkr和代码，但是我遇到了一个错误。

Plunkr

@Component({
  selector: 'my-app',
  template: `
      
    下面应该与上面的输入框绑定
      
  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  constructor() {}
  ngOnInit() {
  }
}

0

2 答案

0 Comments

问题出现的原因：

1. 添加一个键到数组中是不必要的，可以直接使用字符串数组来实现，造成了冗余。

2. 当输入框的值改变时，会改变"toDos"数组的值，从而重新渲染整个"ngFor"。使用"trackBy:trackByIndex;"可以防止重新渲染，因为通过这段代码，只有当索引改变时，ngFor才会重新渲染。

问题的解决方法：

1. 删除数组中的键，直接使用字符串数组。

2. 在ngFor中添加"trackBy:trackByIndex;"，以便只有当索引改变时才重新渲染。

以下是修改后的代码：

({
  selector: 'my-app',
  template: `
  

    

      
    

    Below Should be binded to above input box
    

      
    

  

  `,
  directives: [MdButton, MdInput]
})
export class AppComponent { 
  toDos: string[] =["Todo1","Todo2","Todo3"];
  
  constructor() {}
  
  ngOnInit() {}
  
  trackByIndex(index: number, obj: any): any {
    return index;
  }
}

以上是对原文内容的整理和修改后的代码。

0
0 Comments

问题：更改数字列表时，屏幕上的下一个值会发生变化。

原因：在ngFor中更改数组中的字符串时，如果没有使用trackBy，ngFor会重新创建DOM元素，导致输入框失去焦点并似乎挂起。

解决方法：使用trackBy来跟踪数组中的索引，这样在更改数组中的字符串时，输入框不会失去焦点。另外，如果将输入框放在表单中，需要给输入框命名或使用[ngModelOptions]="{standalone: true}"来确保在修改字符串数组时不会出现错误。同时，需要注意不要使用[attr.name]代替[name]，否则会破坏ngModel的功能。此外，如果在使用ngx-color-picker时遇到焦点丢失的问题，也可以使用这个解决方法。

附加问题：有没有办法追踪字典中每个键的滑块值？

（暂无解答）

0