Question

我有一个用户列表，它为已共享的用户提供了检查，现在，如果我在复选框中的任何一个上进行了检查，那么已经检查过的用户就会被取消选中。请任何人帮我解决这个问题。

HTML：

<div *ngFor="let contact of userList">

              <input  type="checkbox" name="radio" (click)="selectCheckboxInvitee($event.target.checked, contact, false)"
                [(ngModel)]="contact.isChecked" [disabled]="contact.isDisabled" />
              <a>{{ contact.FirstName }} &nbsp;{{ contact.LastName }}</a>
            </div>

Ts：

 selectCheckboxInvitee(evt, contact, isMultiple) {
    if (evt) {

      if (!isMultiple) {
        this.userList.forEach(function (obj) {
          if (obj.Id === contact.Id) {
            obj.isChecked = true;
          }
          else {
            obj.isChecked = false;
          }
        });

      }

    }
  }

  getSharedIds(sPk) {
  //  this.dicom.getSharedIDs(sPk).subscribe(res => {
  //    if (res.Body) {
        const inviteeIds = this.res
          ? this.res.split(",")
          : [];
        this.userList.forEach(r => {
          r.isChecked = false;
        //  r.isDisabled = false;
          if (inviteeIds) {
            inviteeIds.forEach(i => {
              if (i == r.Id) {
                r.isChecked = true;
                r.isDisabled = true;
              }
            });
          }
        });
      }

演示： Please Find Demo here

Answer 1

检查对象是否未禁用

 selectCheckboxInvitee(evt, contact, isMultiple) {
    if (evt) {

      if (!isMultiple) {

        this.userList.forEach(function (obj) {
          if(!obj.isDisabled) {
            if (obj.Id === contact.Id) {
              obj.isChecked = true;
            }
            else {
              obj.isChecked = false;
            }
         }
      });
    }
  }   
}

stackblitz：https://stackblitz.com/edit/angular-zz3zg5

或者您可以使用filter：

this.userList.filter(u => !u.isDisabled).forEach(function (obj) {
  if (obj.Id === contact.Id) {
    obj.isChecked = true;
  }
  else {
    obj.isChecked = false;
  }
});

Answer 2

它的行为与您编写代码的方式完全相同。我可以看到您有一个方法selectCheckboxInvitee，该方法在绑定中接受了一个名为isMultiple的参数。

只需在您的html中对此进行更改：

selectCheckboxInvitee($event.target.checked, contact, false)

到

selectCheckboxInvitee($event.target.checked, contact, true)

它会让您选择多个复选框

即使使用angular2选中了其他复选框，如何也保持复选框处于选中状态

2 个答案: