Question

我有几个要求：

将字符串数组的每个项目加载到输入
输入列表的末尾始终有空输入，以便用户可以添加到数组
每当其中一个输入发生变化时，请将更改发回服务器

我在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)"><br />
  </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

修改

感谢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)"><br />
  </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);
  }
}

使用keyup事件在我更改为数据绑定ngModel时正常停止触发但在切换到ngModelChange之后一切都很棒。

Answer 1

您应该在* ngFor：

上添加trackBy选项

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

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

demo

docs

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

1 个答案: