Angular 2双向绑定从html输入标签中删除名称属性

Posted

技术标签:

【中文标题】Angular 2双向绑定从html输入标签中删除名称属性【英文标题】:Angular 2 Two way binding removes name attribute from html input tag 【发布时间】:2018-01-16 00:35:27 【问题描述】:

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

<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。

【问题讨论】:

你试过name="count[boxindex]"吗?? 尝试无效 html 输入将 'boxindex' 作为键名。 【参考方案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。

【讨论】:

是否有任何版本兼容性,因为我的角度版本是2.0。 您使用的是哪个版本的 Angular? Angular 版本@angular/cli: 1.1.2 node: 8.1.2 os: linux x64 @angular/common: 2.0.0 @angular/compiler: 2.0.0 @angular/core: 2.0.0 @angular/forms: 2.0.0 @angular/http: 2.0.0 @angular/platform-browser: 2.0.0 @angular/platform-browser-dynamic: 2.0.0 @angular/router: 3.0.0 @Zeal Nagar - 我在 angular 2.0.0 测试后编辑了响应

以上是关于Angular 2双向绑定从html输入标签中删除名称属性的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2:如何从枚举创建单选按钮并添加双向绑定?

带有@input属性的Angular 7双向绑定

Angular 7,双向数据绑定

Angular09 数据绑定响应式编程管道

Angular自定义组件实现数据双向数据绑定

Angular 2复选框双向数据绑定