angular 多个 select 框（从数组对象中删除和 selecting 项目）

Question

美好的一天。我有个问题。我有一个现有的对象联系人数组列表，用户可以将联系人添加到数组中，有些有 ID，有些没有 ID。

对象的联系人数组将是用户可以 select 在（复选框列表）上的项目列表。它应该显示列表的 selected 项目（多个或单个），如果用户取消选中它将删除 select 项目。

当某些对象没有像 ID 这样的唯一键时，我们如何从中删除项目？

但我的问题是，当我尝试取消选中时，它不会从 selected 中删除项目。我尝试使用 this.selectedContactTobeEdited.splice(index); 但它仍然无法正常工作或删除该项目。

非常感谢您的帮助。谢谢。

#html代码

 <mat-card *ngFor="let c of contacts;let i = index" class="contact-person-card">
          <div class="contact-person">
              <mat-checkbox (change)="selectedContact(c, $event, i)" class="mat-checkbox margin-top" color="primary">
              </mat-checkbox>
              <mat-icon class="material-icons user-icon margin-top">person</mat-icon>
              <div class="contact-info" >
                  <div class="contact-info-margin-top contact-name">{{c.primaryContactName}}</div>
                  <div class="contact-info-margin-top text-dark">{{c.primaryContactPhone}}</div>
                  <div class="contact-info-margin-top text-dark" style="padding-bottom:20px;">{{c.primaryContactEmail}}</div>
              </div>
          </div>
      </mat-card>

//在此处显示 selected 项目

    <div *ngFor="let s of selectedContactTobeEdited;let i = index;" class="p-label">
        <div class="contact-name">{{s.primaryContactName}}</div>
      </div>

#ts 代码

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

#我正在循环的联系人列表

  contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "TOTO.lim@bermwood.com",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        }
    ]

Answer 1

您没有告诉 Angular 是否应该使用 [checked] 来检查一个框。

我建议你创建一个方法

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

并使用

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

您还有一个错误：要从数组中删除一项，您应该使用 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);
  }
}

Answer 2

我建议在您的联系人数组中再添加一个属性。

contacts = [
        {
            "id": 735,
            "primaryContactName": "adadasd",
            "primaryContactEmail": "TOTO.lim@bermwood.com",
            "primaryContactPhone": "12312312",
        },
        {
            "id": 726,
            "primaryContactName": "Radley",
            "primaryContactEmail": "rob.comtest",
            "primaryContactPhone": "972-523-1052",
        },
        {
            "id": 736,
            "primaryContactName": "test2",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        },
        {
            "primaryContactName": "test",
            "primaryContactEmail": "testmail@gmail.com",
            "primaryContactPhone": "2423423",
        }
    ]

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

并且在 html

 <mat-card *ngFor="let c of contacts;let i = index" class="contact-person-card">
          <div class="contact-person">
              <mat-checkbox [checked]="c.isSelected" (change)="c.isSelected=!c.isSelected" class="mat-checkbox margin-top" color="primary">
              </mat-checkbox>
              <mat-icon class="material-icons user-icon margin-top">person</mat-icon>
              <div class="contact-info" >
                  <div class="contact-info-margin-top contact-name">{{c.primaryContactName}}</div>
                  <div class="contact-info-margin-top text-dark">{{c.primaryContactPhone}}</div>
                  <div class="contact-info-margin-top text-dark" style="padding-bottom:20px;">{{c.primaryContactEmail}}</div>
              </div>
          </div>
      </mat-card>

并用于显示选定的联系人

<div *ngFor="let s of getSelectedContacts();let i = index;" class="p-label">
        <div class="contact-name">{{s.primaryContactName}}</div>
      </div>

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

angular 多个 select 框（从数组对象中删除和 selecting 项目）

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

javascript

typescript

angular-material

angular