angular multi select box (removing and selecting item) from an array objects-CodePudding

Good day . I have a question. I have an existing list of array of object contacts and user can add contacts to the array some have ID and some dont have ID .

The contacts array of objects will be the list of item that user can select on (the list of checboxes) . It should display the selected items of the list (multiple or single ) and if the user uncheck it will remove the select items.

How do we remove items from it when some of the object has no unique key like ID ?

But my issue is it does not remove the items from the selected when I try to uncheck. I tried using this.selectedContactTobeEdited.splice(index); but it still not working or removing the item.

Help would be much appreciated. Thanks.

#html code

 <mat-card *ngFor="let c of contacts;let i = index" >
          <div >
              <mat-checkbox (change)="selectedContact(c, $event, i)"  color="primary">
              </mat-checkbox>
              <mat-icon >person</mat-icon>
              <div  >
                  <div >{{c.primaryContactName}}</div>
                  <div >{{c.primaryContactPhone}}</div>
                  <div  style="padding-bottom:20px;">{{c.primaryContactEmail}}</div>
              </div>
          </div>
      </mat-card>

//diplay selected item here

    <div *ngFor="let s of selectedContactTobeEdited;let i = index;" >
        <div >{{s.primaryContactName}}</div>
      </div>

#ts code

selectedContact(item: any,event , index:any) {
    if(event.checked) {
      this.selectedContactTobeEdited.push(item);
    }else {
      this.selectedContactTobeEdited.splice(index);
    }
  }

#list of contacts the one I am looping

  contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        }
    ]

CodePudding user response：

You are not telling Angular whether a box should be checked using [checked].

I suggest you create a method

shouldBeChecked(contact) {
  return this.selectedContactTobeEdited.includes(contact);
}

And use

<mat-checkbox [checked]="shouldBeChecked(c)" ... >

You have one more error: to remove on item from an array, you should use splice(index, 1)

selectedContact(item: any,event , index:any) {
  if(event.checked) {
    this.selectedContactTobeEdited.push(item);
  } else {
    // You forgot the 1 here
    this.selectedContactTobeEdited.splice(index, 1);
  }
}

CodePudding user response：

I would suggest to add another property in your Contacts array.

contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "[email protected]",
            "primaryContactPhone": "2423423",
        }
    ]

this.contacts.map((_contact)=>_contact.isSelected = false);

And in the html

 <mat-card *ngFor="let c of contacts;let i = index" >
          <div >
              <mat-checkbox [checked]="c.isSelected" (change)="c.isSelected=!c.isSelected"  color="primary">
              </mat-checkbox>
              <mat-icon >person</mat-icon>
              <div  >
                  <div >{{c.primaryContactName}}</div>
                  <div >{{c.primaryContactPhone}}</div>
                  <div  style="padding-bottom:20px;">{{c.primaryContactEmail}}</div>
              </div>
          </div>
      </mat-card>

And for showing the selected contacts

<div *ngFor="let s of getSelectedContacts();let i = index;" >
        <div >{{s.primaryContactName}}</div>
      </div>

getSelectedContacts(){
     return this.contacts.filter(_contact=> _contact.isSelected);
}