首页 文章

使用ngFor插入新输入时的焦点问题

提问于
浏览 次
2

我有几个要求：

  • 将字符串数组的每个项目加载到输入中

  • 在输入列表的末尾始终有一个空输入，以便用户可以添加到数组

  • 每当其中一个输入发生变化时，将更改发回服务器

我在Angular中很难做到这一点 . 我最接近的是：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let title of titles; let i = index">
    <label>Box {{i}}</label>
    <input type="text" [id]="'box' + i"
    [ngModel]="titles[i]" 
    (keyup)="onKeyUp($event.target, i)">

  </div>
  `
})
export class AppComponent {
  titles = ['1', '2', ''];

  onKeyUp(target, index){
    this.titles[index] = target.value;
    if(this.titles.length-1 === index){
      this.titles.push('');
      target.value = '';
    }
    document.getElementById('box' + index).focus();
  }
}

这里唯一的错误是焦点需要在用户输入的输入上，而不是在用户开始键入空输入时移动到列表中的输入 . 关于如何解决这个问题的任何建议？

插在这里：https://plnkr.co/edit/VuSR6C6g0vVOsRQEq5T2

EDIT

感谢Vega在下面的回答，我提出了这个完美的解决方案：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <div *ngFor="let title of titles; let i = index; trackBy: trackByFn">
    <input type="text"
    [(ngModel)]="titles[i]" 
    (ngModelChange)="onChange($event, i)">

  </div>
  `
})
export class AppComponent {
  titles = ['1', '2', ''];

  trackByFn(item, id){
    return item
  }

  onChange(target, index){
    if(this.titles.length-1 === index){
      this.titles.push('');
    }
    console.log(this.titles);
  }
}

当我更改为数据绑定ngModel但是在切换到ngModelChange后，一切都很棒，它使用keyup事件停止正常触发 .

angular

1 回答

  • 2

    你应该在* ngFor上添加trackBy选项：

    Angular使用对象标识来跟踪迭代器中的插入和删除，并在DOM中重现这些更改 . ...要自定义默认跟踪算法，NgForOf支持trackBy选项 . trackBy接受一个有两个参数的函数：index和item . 如果给出了trackBy，则Angular跟踪会根据函数的返回值进行更改 .

    <div *ngFor="let title of titles; let i = index; trackBy: trackByFn">

    demo

    docs

    回复于

相关问题