Angular2数据绑定动态传递变量答案

【问题标题】：Angular2 data binding pass variable dynamicallyAngular2数据绑定动态传递变量
【发布时间】：2018-11-07 05:21:58
【问题描述】：

使用 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>

我的问题在于“名称”属性。我希望索引“i”作为数字传递，尽管它通过 i 本身（字母）。正确传递索引的方法是什么？

我尝试了类似的方法：

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

但显然没有成功。

欢迎任何帮助。

【问题讨论】：

为什么你不使用 email 从你的ngFor ？

标签： angular data-binding angular5

【解决方案1】：

您可以在迭代中使用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>

【讨论】：

如果您希望 Angular 解释该值而不是将其作为字符串文字传递，您需要将 name 括在方括号中，即 [name]=email.EmailAddress
@MikkaRin API 返回“EmailAddresses[0].EmailAddress”、“EmailAddresses[1].EmailAddress”等...我需要将“EmailAddresses[i].EmailAddress”这个词作为名称传递" 但不是 i，而是确切的数字。我忘了提到我使用 C# 数据注释属性。谢谢

【解决方案2】：

通过阅读您的评论，我认为您需要的是：

<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 等作为值

【讨论】：

【解决方案3】：

我设法找到了解决问题的方法。正如我提到的 EmailAddresses[i].EmailAddress 是一个字符串而不是一个模型 - 我想要这个确切的文本。虽然，我需要动态更新索引。

直截了当，解决办法是：

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

感谢大家的帮助。

【讨论】：