Angular push and splice array elements bound to html

Question

I have a little form like this whenever I click "add" a new row gets added.

HTML:

   <div class="tel" *ngFor="let t of tel; let i = index">
          <div class="row">
            <div class="col-md-2">
              <input type="text" class="form-control" [(ngModel)]="t.telFijo" [name]="'tfijo'+i">
            </div>
            <div class="col-md-2">
              <input type="text" class="form-control" [(ngModel)]="t.telCelular" [name]="'tcel' + i">
            </div>
            <div class="col-md-2">
              <input type="text" class="form-control" [(ngModel)]="t.anexo" [name]="'anex' + i">
            </div>
            <div class="col-md-2">
              <input type="text" class="form-control" [(ngModel)]="t.skype" [name]="'skype' + i">
            </div>
            <div id="em" class="col-md-3">
              <input type="email" class="form-control" [(ngModel)]="t.email" [name]="'email' + i">
            </div>
            <div class="col-md-1">
              <i id="trash" class="fa fa-trash" (click)="eliminar(i)"></i>
            </div>
          </div>
        </div>

Whenever I add I push an object.

  agregar() {
 const telefono = new Telefono();
this.tel.push(telefono);
}

And whenever I remove an item I splice it in the current position.

 eliminar(i) {
 this.tel.splice(i, 1);
 }

That works fine, the issue is that when I try to add a new row after I deleted one, the last two rows get deleted.

In this example I had 3 rows, deleted the middle one and then added one. Which made the previous one get deleted. I honestly have no idea why this happens. I would love to know if there is something I'm missing.

Suresh Kumar Ariya · Accepted Answer · 2018-11-14 16:27:15Z

1

In addition

agregar() {
  const telefono = new Telefono();
  this.tel.push(telefono);
}

answered Nov 14, 2018 at 16:27

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flavio Alarcon Over a year ago

I had telefono as a global variable that was also a new Telefono(); and it didn't work, just for clarification declaring it inside the method is also not working :/

Collectives™ on Stack Overflow

Angular push and splice array elements bound to html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related