Angular2 *ngFor把数据显示在多个input中出错解决方法
点击添加按钮会自动添加一个空的input组
html
<div class="form-inline">
<label class="form-control-label">属性</label>
<button type="button" class="btn btn-test" (click)="addProperty()">添加</button>
</div>
<div class="properties" *ngIf="options.properties">
<div class="property-inline" *ngFor="let property of options.properties; let idx=index">
<div class="form-inline" >
<label class="form-control-label"></label>
<div class="input-group">
<div class="form-inline">
<input type="text" class="property-input" name="proName_field" [(ngModel)]="property.name">
<input type="{{property.secret ? 'password' : 'text'}}" class="property-input" name="proValue_field" [(ngModel)]="property.value" >
<input type="checkbox" [(ngModel)]="property.secret" name="secret_field">
<a (click)="deleteProperty(idx)"><i class="fa fa-trash color-red"></i></a>
</div>
</div>
</div>
</div>
</div>
js
addProperty() {
const tempProperty = {
name: '',
value: ''
};
if (!this.options.properties) {
this.options.properties = [];
}
this.options.properties.push(tempProperty);
} deleteProperty(index) {
this.options.properties.splice(index, 1);
}
出现的问题是,当我在第一行input中分别添加上数据xxx,ddd后,再次点击添加按钮,此时页面刷新,添加一个空的input行,此时有两行,而第一行input中填好的值却不见了,查看元素它的model属性明明又是绑定了刚输入的值的,页面上怎么没有显示呢?
通过查阅资料了解到在ng2表单中使用ngModel需要注意,必须带有name属性或者使用 [ngModelOptions]=”{standalone: true}”,二选其一,再看我的html代码中我把显示name的input的name属性设置为一个定值,这样再经过*ngFor后,显示不同name值的input的name属性都是一样的,是不是这个原因导致的呢,于是就试着把每个input的name属性设为不一样的值:
<div class="form-inline">
<label class="form-control-label">属性</label>
<button type="button" class="btn btn-test" (click)="addProperty()">添加</button>
</div>
<div class="properties" *ngIf="options.properties">
<div class="property-inline" *ngFor="let property of options.properties; let idx=index">
<div class="form-inline" >
<label class="form-control-label"></label>
<div class="input-group">
<div class="form-inline">
<input type="text" class="property-input" [name]="'proName_field' + idx" [value]="property.name" [(ngModel)]="property.name">
<input type="{{property.secret ? 'password' : 'text'}}" class="property-input" [name]="'proValue_field'+idx" [(ngModel)]="property.value" >
<input type="checkbox" [(ngModel)]="property.secret" [name]="'secret_field'+idx">
<a (click)="deleteProperty(idx)"><i class="fa fa-trash color-red"></i></a>
</div>
</div>
</div>
</div>
</div>
问题解决了。。。。
Angular2 *ngFor把数据显示在多个input中出错解决方法的更多相关文章
- WebView中input file的解决方法
public class MyWb extends Activity { /** Called when the activity is first created. */ WebView web; ...
- Android WebView 不支持 H5 input type="file" 解决方法
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...
- thinkphp配置rewrite模式访问时不生效 出现No input file specified解决方法
使用thinkphp配置rewire模式的路径访问网站时, 直接复制官网的.htaccess文件的代码复制过去 1 2 3 4 5 6 <IfModule mod_rewrite.c> ...
- 移动端页面输入法挡住input输入框的解决方法
1,宽高用了百分比或者vw/vh布局的,input输入框的最外层父容器的可用JS动态设置为当前窗口的宽高(防止输入法的弹出令页面变形) 2,最外层父容器用了fixed定位的,不要用top:0;要用bo ...
- thinkphp 5.6以上版本出现No input file specified解决办法
打开thinkphp,出现No input file specified. 解决方法:在工程下的.htaccess文件里, 把RewriteRule ^(.*)$ index.php/$1 [QSA, ...
- PHP icov转码报错解决方法,iconv(): Detected an illegal character in input string
iconv(): Detected an illegal character in input string 错误解决方法 //转码 function iconv_gbk_to_uft8($strin ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- laravel Input Cokkie 的各种方法 超实用!!!
基本输入 Laravel使用一种简单的方式来访问用户提交的信息. 你可以用统一的方式来访问用户提交的信息,而不用为用户提交信息的方式操心. 获取一个用户提交的值 代码如下: $name = Input ...
随机推荐
- height百分比失效
heigh:100%失效 解决方案: 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定 ...
- ansible 回调函数处理
https://www.u3v3.com/ar/1421 https://serversforhackers.com/c/running-ansible-2-programmatically
- python爬虫实战(九)--------拉勾网全站职位(CrawlSpider)
相关代码已经修改调试成功----2017-4-24 详情代码请移步我的github:https://github.com/pujinxiao/Lagou_spider 一.说明 1.目标网址:拉勾网 ...
- php中的字符串常用函数(二) substr() 截取字符串
//substr($str, startIndex, length) //截取方向都是从左向右的. //length不写默认截取到最后一个. //length为正是个数(包括开头的个数),为负是索引( ...
- Linux NTP时间服务器
NTP 时间服务器 ntp也是一种协议 ntp软件(支持ntp协议) CentOS6自带 CentOS7需要安装 chrony软件(支持ntp协议) CentOS7自带 安装ntp CentOS ...
- No Mapping For GET "xxx.do"
今天写的一个form表单提交时总是报错找不到mapping,form如下: <form action="toUpdate.do" method="post" ...
- Grpc helloworld demo的经验
GreeterGrpc.java这个文件是插件protoc-gen-grpc-java生成的 刚开始直接用类似如下的指令无法生成GreeterGrpc.java文件 protoc --java_ou ...
- 《JavaWeb从入门到改行》关于BaseServlet那些事
@为什么需要BaseServlet? 我们知道一个POST或者GET提交对应着一个Servlet, 无数的提交会让Servlet页面增加,我们希望一个Servlet就能处理很多提交的请求. @Bas ...
- Windows任务计划向远程服务器拷贝文件,报登录失败: 未知的用户名或错误密码
问题产生很奇怪,当你登录到系统时,执行自动化作业是正常 但到了晚上凌晨自动执行作业时,则报登录失败: 未知的用户名或错误密码 解决方案: 在拷贝脚本中加及一行,创建net use 命名,每次文件拷贝前 ...
- MySQL与PHP的连接教程步骤(图文)
本篇文章我们介绍一下PHP与MySQL的整合,既然是与MySQL整合,那么我们首先肯定是要安装MySQL.下面我们就介绍下MySQL的安装方法. 第一步,下载MySQL.下载PHP可以去PHP中文网下 ...