zoukankan      html  css  js  c++  java
  • 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>

    问题解决了。。。。

  • 相关阅读:
    PAT 乙级 -- 1011 -- A+B和C
    PAT 乙级 -- 1010 -- 一元多项式求导
    PAT 乙级 -- 1008 -- 数组元素循环右移问题
    PAT 乙级 -- 1009 -- 说反话
    python3.6执行AES加密及解密方法
    Python3.6 AES加密 pycrypto‎ 更新为 pycrypto‎demo | TypeError: Object type <class 'str'> cannot be passed to C code
    windows下python3.6安装pycryto or crypto or pycryptodome与使用
    chkconfig命令
    centos下安装redis
    selenium--基础学习
  • 原文地址:https://www.cnblogs.com/xuepei/p/7808779.html
Copyright © 2011-2022 走看看