* ngДля сброса всех значений формы при добавлении нового элемента ввода

У меня есть приложение Angular2 с кнопкой, которая может добавить еще один кредит к моим кредитам. Мой * ngFor также довольно прост:

    <div *ngFor="let loan of myLoans">
      <label>{{loan.name}}</label>
      <input type="text" name="loan.name" [(ngModel)]="loan.amount">
    </div>

myLoans - это массив объектов Loan с параметрами name и amount. Моя кнопка тоже очень простая.

<button id="addLoan" type="button" (click)="addLoan()">Legg til lån</button>

Функция addLoan():

addLoan(): void{
    var newLoan = new Loan();
    this.myLoans.push(newLoan);
}

Моя проблема в том, что когда я добавляю новый кредит в список, любое значение, которое у меня было в поле ввода для других моих кредитов, возвращается к 0 или любое значение, которое я установил в конструкторе для объекта кредита.

Загрузка приложения показывает эту картинку

ngModel работает при наборе числа

После нажатия кнопки "Legg til lån" значение первого входа сбрасывается

ngModel все еще работает для первого ввода, если я попытаюсь ввести другой номер

У кого-нибудь есть идея, что здесь происходит?

Ответ 1

AJT_82 близок к проблеме, поскольку непознаваемые имена вызывают у вас проблемы, однако вы можете сделать еще более простое исправление и еще одно в соответствии с тем, что вы, вероятно, хотели, изменив шаблон html на это

<div *ngFor="let loan of myLoans">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name" [(ngModel)]="loan.amount">
</div>

Обратите внимание на изменение ввода имени в []. Это гарантирует, что шаблон поддерживает ссылку на имя и до тех пор, пока имя каждого кредита будет уникальным, так что будет идентификатор.

Update: Если имя не уникально, вы можете добавить к нему индекс, чтобы сделать его уникальным.

<div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name + '_' + i" [(ngModel)]="loan.amount">
</div>

Ответ 2

Я на 99% уверен, что вы используете форму без уникальных атрибутов name, так как работает ngModel.

Атрибут name должен быть уникальным для оценки как отдельных полей. Angular действительно не заботится о ngModel в формах, но вместо этого ищет атрибут name.

Обратите внимание, что атрибут name, который вы в настоящее время установили: name="loan.name" фактически содержит только строковый литерал loan.name не фактическое значение вашей модели, поэтому имя не уникально.

Поэтому, когда вы нажимаете новый loan, все остальные кредиты получают такое же значение, как и новое нажатое значение, так как все поля оцениваются как одно и то же.

Это можно легко устранить, добавив индекс в атрибут name, например:

<div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" name="loan.name{{i}}" [(ngModel)]="loan.amount">
</div>

Ответ 3

Значение ввода становится равным нулю, потому что вы объявили [(ngModel)] объектом итератора * ngFor. И когда вы нажимаете пустой объект на массив myLoans, ngModel меняет ввод на ноль (значение по умолчанию для количества)

Пример:

myLoans = [0, 1, 2, 3]

Когда вы обновляете страницу, [[ngModel]) связывает последнее значение массива со входом (3).

Если вы написали 125 на входе,

Затем вы также изменяете значение последнего массива

myLoans = [0, 1, 2, 125]

Если вы нажмете новый элемент, Angular обновит вход с последним значением массива

myLoans = [0, 1, 2, 125, 0]

Input.value now = 0

Мое мнение: плохое использование ngModel внутри * ngFor, есть другой способ выполнить ту же задачу, используя (click) событие и Angular Selector. Вместо этого попробуйте:

<input #loan ..>
<button (click)="addLoan(loan.value)">Add Loan</button>

Ответ 4

Я пробовал свой код, и он отлично работает для меня. Я предполагаю, что это может быть проблема с компилятором. Попробуйте обновить библиотеки ng2 и typescript до последней версии. Вот пример частичного файла tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "typeRoots": ["node_modules/@types/"],
    "types": [
      "node",
      "es6-shim"
    ]
  }
}

Также избегайте использования "var" для объявления переменной. Используйте "let", чтобы сохранить область переменной. Я думаю, что ваша проблема может быть связана с использованием var. Если вы используете старый компилятор, это может испортить ваш объект.

Ответ 5

@Joo_Beck предложил использовать [name]=loan.name вместо name='loan.name'. Но это не сработало для меня. Я просто добавил индекс {{i}} с именем, приведенным ниже, и он работал отлично.

<div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" name="loan.name{{i}}" [(ngModel)]="loan.amount">
</div>

Решение, сработавшее для меня, предложено @AJT_82. Спасибо за

Спасибо @Cassiano, вы очень хорошо объяснили причину!