Связывание данных Angular2 динамически передает переменную

Question

Использование Angular (5) Я отображаю список адресов электронной почты, предоставляя форму ввода для каждого из них.Форма ввода поступает из дочернего компонента, поэтому мой код:

<div *ngFor="let email of user.emailAddresses; let i = index">
  <form-input label="Email Address:"
              name="EmailAddresses[i].EmailAddress"
              [(ngModel)]="user.emailAddresses[i].emailAddress"
              ngDefaultControl></form-input>
</div> 

Моя проблема в свойстве name.Я бы ожидал, что индекс 'i' будет передан как число, хотя он сам передает i (буква).Как правильно пройти индекс?

Я пробовал что-то вроде:

name="EmailAddresses["+'i'+"].EmailAddress"

, но, очевидно, безуспешно.

Любая помощь приветствуется.

Answer 1

После прочтения вашего комментария я думаю, что вам нужно:

<div *ngFor="let email of user.emailAddresses; let i = index">
  <form-input label="Email Address:"
              [name]="'EmailAddresses[' + i + '].EmailAddress'"
              [(ngModel)]="user.emailAddresses[i].emailAddress"
              ngDefaultControl></form-input>
</div> 

Это даст EmailAddresses[0].EmailAddress и т. Д. В качестве значения

Answer 2

Мне удалось найти решение моей проблемы.Как я уже упоминал, EmailAddresses [i] .EmailAddress - это строка, а не модель - я хочу этот точный текст.Хотя мне нужно динамически обновлять индекс.

Кстати, решение:

[name]="'EmailAddresses['+i+'].EmailAddress'"

Спасибо всем за помощь.

Answer 3

Вы можете использовать email внутри итерации:

<div *ngFor="let email of user.emailAddresses; let i = index">
  <form-input label="Email Address:"
              [name]="email.EmailAddress"
              [(ngModel)]="user.emailAddresses[i].emailAddress"
              ngDefaultControl></form-input>
</div>