ngFor показывает пустые элементы после array.push

У меня есть это в моем шаблоне:

<input type="button" value="add" (click)="addEnvVar()"/>
<div *ngFor="let envVar of application.env_vars">
    <input type="text" name="key" [(ngModel)]="envVar.key">
    <input type="text" name="value" [(ngModel)]="envVar.value">
</div>

Код позади addEnvVar(): this.application.env_vars.push({key:'', value:''});

Когда компонент инициализируется, внутри env_vars находится один объект, и он прекрасно отображается (поля <input> заполнены). После того, как я нажму «добавить», я вижу в консоли, что внутри env_vars действительно есть два объекта (второй — «пустой» объект, который я только что добавил), и в представлении действительно есть два <div> для каждого envVar, но все 4 <input> поля пусты.

Что я делаю не так?

ОБНОВЛЕНИЕ

Я думаю, проблема в том, что когда ngFor производит более одного div, все входы в каждом div получают один и тот же жестко закодированный атрибут name (в моем случае - "ключ" и "значение"), и значение каким-то образом привязано к этому . Я изменил name="key" на name="key_{{i}}" (i — это переменная шаблона, содержащая свойство индекса ngFor).

Вопрос в том, это путь? Или я все еще что-то упускаю?


angular ngfor
person OzW    schedule 31.10.2016    source источник
comment
Разве вы не вводите пустые значения с помощью {key:'', value:''} ? Тогда имеет смысл ничего не показывать в поле ввода, так как модель сзади тоже пуста   -  person JonasMH    schedule 31.10.2016
comment
@JonasMH После добавления у меня есть 4 поля ввода. Два новых поля ввода должны быть пустыми, но первые два должны быть заполнены значениями первого объекта в массиве, который не изменился.   -  person OzW    schedule 31.10.2016
comment
Это тот случай, когда вам, вероятно, следует использовать реактивные формы, а не формы на основе модели, и использовать FormArray.   -  person JB Nizet    schedule 01.11.2016
comment
Минимальный пример: plnkr.co/edit/z4JbCTk1WQdcYprXfUu2?p=preview   -  person JB Nizet    schedule 01.11.2016

Ответы (1)


arrow_upward
3
arrow_downward

Виновником подобных ошибок, скорее всего, является функция trackBy по умолчанию, которая отслеживает ссылки. Даже если данные не изменились, но изменились ссылки, он разрушит DOM и создаст его заново, что означает, что все данные внутри полей ввода будут очищены.

Составная часть

trackBy(index) { return index }

Шаблон

*ngFor="let envVar of application.env_vars; trackBy: trackBy"

К сожалению, я не могу проверить это без репродукции. Тем не менее, комментарий JB Nizet верен, и вы должны следовать этому совету; это задача больше подходит для реактивных форм, а не для шаблонных форм.

person Lazar Ljubenović    schedule 30.08.2017