Фокус Проблема при вводе нового ввода с помощью ngFor

У меня есть пара требований:

  1. Загружать каждый элемент массива строк в исходные данные
  2. Всегда иметь пустой вход в конце списка входов, чтобы пользователи могли добавлять в массив
  3. Каждый раз, когда изменяется один из этих входов, отправляйте изменения обратно на сервер

Мне трудно делать это в Angular. Самое близкое, что я получил:

import { Component } from '@angular/core';
@Component({
 selector: 'my-app',
 template: '
 <div *ngfor="let title of titles; let i = index">
 <label>Box {{i}}</label>
 
 </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">
 
 </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, все было замечательно.

1 ответ

Вы должны добавить опцию trackBy на * ngFor:

Угловое использует идентификатор объекта для отслеживания вставки и удаления в итераторе и воспроизведения этих изменений в DOM.... Чтобы настроить алгоритм отслеживания по умолчанию, NgForOf поддерживает функцию trackBy. trackBy принимает функцию, которая имеет два аргумента: index и item. Если указано trackBy, угловые дорожки изменяются по возвращаемому значению функции.

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


 <p> <a href="https://plnkr.co/edit/6QZquzR0vVI3D79QgaHt?p=preview" rel="nofollow noreferrer" target="_blank">демонстрация</a></p> <p> <a href="https://angular.io/api/common/NgForOf#syntax%23syntax" rel="nofollow noreferrer" target="_blank">документы</a></p> </div>

licensed under cc by-sa 3.0 with attribution.