13

我有一个带有按钮的 Angular2 应用程序，可以在我的贷款中添加另一笔贷款。我的 *ngFor 也很简单：

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

myLoansname是一个带有和amount参数的 Loan 对象数组。我的按钮也很简单。

<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 仍在为第一个输入工作

在此处输入图像描述

有人知道这里发生了什么吗？

4

5 回答 5

24

AJT_82 接近问题所在，因为非唯一名称会给您带来问题，但是您可以通过将模板 html 更改为此来进行更简单的修复，并且可以根据您可能想要的方式进行更多修复

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

请注意将名称放在 [ ] 中的更改。这将确保模板维护到名称的链接，并且只要每笔贷款的名称是唯一的，标识符也是如此。

更新： 如果名称不是唯一的，您可以将索引添加到它以使其像这样唯一。

<div *ngFor="let loan of myLoans; let i=index">
  <label>{{loan.name}}</label>
  <input type="text" [name]="loan.name + '_' + i" [(ngModel)]="loan.amount">
</div>
于 2017-04-27T23:40:49.943 回答
6

我 99% 确定您使用的是没有唯一name属性的表单，因为它ngModel有效。

name 属性必须是唯一的，才能作为单独的字段进行评估。Angular 并不真正关心ngModelin 表单，而是查看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>
于 2017-04-27T18:12:57.337 回答
1

@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，您很好地解释了原因！

于 2018-09-01T05:25:53.440 回答
1

输入的值变为零，因为您已将 [(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 现在 = 0

我的观点：在 *ngFor 中使用 ngModel 是一种不好的做法，还有另一种方法可以使用（单击）事件和 Angular Selector 来完成相同的任务。试试这个：

<input #loan ..>
<button (click)="addLoan(loan.value)">Add Loan</button>
于 2017-04-27T18:04:04.193 回答
1

我已经尝试过你的代码，它对我来说很好。我假设这可能是编译器问题。尝试将您的 ng2 和 typescript 库更新到最新版本。这是一个示例部分 tsconfig 文件：

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

还要避免使用“var”进行变量声明。使用“let”来保持变量范围。我认为你的问题可能是因为使用了 var。如果您使用的是旧编译器，它可能会弄乱您的对象。

于 2017-04-27T18:15:38.417 回答