角动态形式

时间:2018-07-03 07:40:38

标签: angular

我不知道发生了什么。 首先我输入1111至5555号。 总共5条记录,然后我单击“添加目标”按钮后,我删除了3333个数字。它向我显示https://i.stack.imgur.com/6e4dc.png < strong> 5555条记录消失的地方,但它存在于targetModel中。当我调试变量{{targetModel | json }}时。

  

添加几条记录,然后从中间记录中删除,然后单击添加   按钮。结果不同。

请告诉我我在哪里做错了。

HTML:

<form #addTargetForm="ngForm">
    <div class="row flex-baseline clerafix" *ngFor="let target of targetModel;let i=index">
        <div class="input-field caseOneL">
            <div class="target_fields">
                <span class="icon_target"></span>
                <input  maxlength="50" placeholder="Enter target name here" 
                        name="name_{{i}}" [(ngModel)]="target.Name" required>
                <span *ngIf="i>0" style="color:black" 
                      (click)="removeTarget1(i)">remove</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col l12 m12 s12">
            <button class="btn sm mat-btn-custom w_icon btn-outline" 
                 (click)="addTarget1()" >
            <span class="icon_mat left">
                <mat-icon>add</mat-icon>
            </span>Add Target
            </button>
        </div>
    </div>
</form>

TS:

    targetModel: any;

    constructor() {
            this.targetModel=[{Name:""}];
    }

    addTarget1() {
          let target={Name:""};
          this.targetModel.push(target);
    }

    removeTarget1(target) {
          this.targetModel.splice(target, 1)
    }
  

ScreenShots

ScreenShot1:https://i.stack.imgur.com/dP1QF.png

ScreenShot2:https://i.stack.imgur.com/BIUcQ.png

ScreenShot3:https://i.stack.imgur.com/6e4dc.png

0 个答案:

没有答案