Angular 2双向绑定从html输入标记

时间:2017-08-08 12:26:03

标签: html laravel-5 angular2-forms angular-ngmodel

当我在输入标记中进行双向绑定时,name属性将从输入标记中删除。绑定元素是一个数组。

<div class="row" *ngFor="let box of boxs; let boxindex=index ">
<div class="col-sm-4">
<label>Boxs</label>
<input type="text" name="count[{{boxindex}}]" [(ngModel)]="box[boxindex]">
</div>
</div>

当我以上述方式书写时,名称属性被删除但

<div class="row" *ngFor="let box of boxs; let boxindex=index ">
<div class="col-sm-4">
<label>Boxs</label>
<input type="text" name="count[]" [(ngModel)]="box[boxindex]">
</div>
</div>

以这种方式保留name属性。第一段代码中的错误是什么? 我将此表格发布到Laravel Route。

1 个答案:

答案 0 :(得分:1)

我测试了你的初始代码

<div *ngFor="let box of boxs; let boxindex=index ">
  <div>
   <label>Boxs</label>
   <input #input type="text" name="count[{{boxindex}}]" placeholder={{input.name}}>
  </div>
</div>

on plunkr here并且它正在发挥作用,应该是别的名字。

修改

我尝试使用2.0.0的相同代码正在运行。虽然我不知道您在此处显示的代码是如何工作的,但因为2.0.0角度不接受let上的*ngFor#

<div *ngFor="#box of boxs; #boxindex=index ">

你可以找到工作的plunkr here

我强烈建议您将2.0.0解决方案升级到最新版本的Angular。