Angular 2 Add or Remove item from Array

Question

I have this method here:

messageSelected($event, index) {
  console.log($event.target.checked);
  console.log(index);
  if ($event.target.checked) {
    this.selectedMessages.push($event.target.getAttribute('name'));
  }
  else {
    var item = this.selectedMessages.indexOf($event.target.getAttribute('name'), 0);
    this.selectedMessages.slice(item, 1);
  }
  console.log(this.selectedMessages);
}

What I am trying to do is if an item is checked, add the item to the array (this part works) now I am trying to remove the item from the array if the checked is false (this part is not working)

The problem is that the item is not getting removed from the array. What am I doing wrong?

Here is my HTML:

<div class="card" *ngFor="let i of userMessages; let item = index">
  <div class="card-body row-eq-height clearfix">
    <div class="col-sm-2 vertical-center text-center">
      <div class="avatar">
      </div>
    </div>
    <div class="col-sm-8 vertical-center xs-center-text">
      <strong class="username">Username</strong>
      <p><a class="read-more" [routerLink]="['/singleMessage/' + i.id]">{{i.subject}}</a></p>
    </div>
    <div class="col-sm-2  col-xs-6  clearfix">
      <span class="date">{{i.updated_at | date: 'MM/dd/yyyy'}}</span>
    </div>
    <div class="col-sm-1  col-xs-6  text-right clearfix no-x-padding">
      <div class="custom-check pull-right">
        <input type="checkbox" id="{{i.id}}" name="{{i.id}}" (change)="messageSelected($event, item)"/>
        <label for="{{i.id}}"></label>
      </div>
    </div>
  </div>
</div>

Thanks, thats worked....if you want to put into an answer ill accept it — user979331
– user979331, Commented Oct 26, 2018 at 3:11

sminutoli · Accepted Answer · 2018-10-26 03:53:49Z

Besides the confusion between slice (not mutating option) and splice, it seems like you're using angular as vanilla js.

The whole idea of using a framework like this, is to get rid of DOM inspection / manipulation.

You don't need to overload the <input name>, you could call directly messageSelected($event.target.checked, i.id) (modifying the function firm as well, providing all the needed data).

Better than that, you could use two way binding [(ngModel)]="selectedItems[i.id]" to bind the checkbox to a map (object) of "selected items", and then simply extract the true entries, mapping this to an array.

Or, if you dont mind to mutate the i object, you could bind ngModel directly on a custom property like [(ngModel)]="i.selected".

The idea is to avoid wiring manually the change and the getAttribute('name').

Here's a living example: https://codesandbox.io/s/rjxn1y84wm

Russell · Accepted Answer · 2018-10-26 03:16:31Z

1

AngularJS binds to the Array Object, and the slice function in JS creates a new array as a result, leaving the original array as it is.

You should use splice (note the p) which will update the array.

For example:

var index = this.selectedMessages.indexOf($event.target.getAttribute('name'));
this.selectedMessages.splice(index, 1);

answered Oct 26, 2018 at 3:16

Russell

17.8k24 gold badges84 silver badges127 bronze badges

Collectives™ on Stack Overflow

Angular 2 Add or Remove item from Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related