手动取消选中角材料中的复选框

Question

当我尝试嵌套选择语句并为所选角色提供UI时，我遇到了Angular Material的问题，并且能够删除这些角色。 Image1- Selecting from dropdown，Image2- Selecting Item in 'Add Additional Roles'， 问题是，当我删除角色时，仍在“添加其他角色”下拉菜单中为它们选中了复选框，这意味着当您取消选择表单项时，标签仍显示为被选中的角色（实际上是已在component.ts中删除） Image3- Checkbox still shows after role deleted，Image4- Deleted role still shows as the label 有没有办法强制取消选中某个复选框而不实际选择它？当用户删除某个项目时，基本上可以手动强制在“添加其他角色”下拉菜单中取消选中该角色。

我已经尝试在控制台上将事件记录在mat-select上，以查看是否有手动将复选框选中/取消选中的方法，但找不到任何方法。

<mat-form-field fxFlex="100" fxFlex.gt-md="50" class="md-block u-mat-form-field-padding-0">
                  <mat-label for="siteInfo">Select Roles</mat-label>
                  <mat-select id="siteInfo" formControlName="siteInfo" multiple required>
                    <div style="display:flex; padding:10px; flex-wrap:wrap;">
                      <div style="flex:1 50%; display:flex; flex-wrap:wrap;">
                        <div style="flex:1 100%">
                          <label>Choose Role Group</label>
                          <mat-select
                            id="roleGroupId"
                            formControlName="roleGroupId"
                            multiple
                            required
                            placeholder="Select"
                          >
                            <mat-option
                              *ngFor="let roleGroup of roleGroupList"
                              [value]="{ submitValue: roleGroup.SYS_RoleGroupID, formValue: roleGroup.RoleGroup }"
                              (click)="addOrRemoveRole(roleGroup)"
                              >{{ roleGroup.RoleGroup }}</mat-option
                            >
                          </mat-select>
                        </div>
                        <div style="flex:1 100%">
                          <label for="roleId">Add additional Roles</label>
                          <mat-select
                            id="roleId"
                            formControlName="roleId"
                            multiple
                            required
                            placeholder="select"
                            (keyup)="isRoleIdOrRoleGroup($event)"
                            (click)="isRoleIdOrRoleGroup($event)"
                          >
                            <mat-option
                              *ngFor="let userRole of userRoleList"
                              [value]="{ submitValue: userRole.SYS_RoleID, formValue: userRole.Role }"
                              (click)="addOrRemoveRole($event)"
                              id="{{ userRole.SYS_RoleID }}"
                              >{{ userRole.Role }}</mat-option
                            >
                          </mat-select>
                        </div>
                      </div>
                      <div style="flex:1 50%">
                        <p>Current Roles</p>
                        <ul>
                          <li *ngFor="let role of currentRoles" id="{{ role.SYS_RoleID }}">
                            <span>{{ role.Role }}</span
                            ><span style="background:lightblue" (click)="addOrRemoveRole($event)">Remove</span>
                          </li>
                        </ul>
                      </div>

                      <div style="flex: 0 75%"></div>
                    </div>
                  </mat-select>
                  <mat-error *ngIf="siteInfo.touched && siteInfo.invalid">
                    This field is required
                  </mat-error>
                </mat-form-field>

  addOrRemoveRole(selectedRoleOrGroup) {
    // debugger;
    console.log(selectedRoleOrGroup);
    // Check to see if Role Group is being added
    if (selectedRoleOrGroup.SYS_RoleGroupID) {
      // Check to see if user is de-deselecting a Role Group (ie, if roleGroupId already exists, then set it to empty)
      if (this.roleGroupId.value.length === 0) {
        // this needs to change to just splice of rolegroup id items rather than reset selected roles completely
        this.currentRoles = [];
        return (this.userRoleList = this.filterRoles(this.userRoleListMaster, this.currentRoles));
      } else {
        // If they are selecting a role group (ie it's length is 0), then set it with dummy data
        this.currentRoles = this.roleGroupDummyData;
        return (this.userRoleList = this.filterRoles(this.userRoleListMaster, this.currentRoles));
      }
    }

    let selectedUserRole;
    if (selectedRoleOrGroup.srcElement.innerText === 'Remove') {
      selectedUserRole = {
        SYS_RoleID: Number(selectedRoleOrGroup.path[1].id),
        Role: selectedRoleOrGroup.path[1].children[0].innerText
      };
      console.log('SELECTEDUSERROLE: ', selectedUserRole);
    } else {
      selectedUserRole = {
        SYS_RoleID: Number(selectedRoleOrGroup.path[1].id),
        Role: selectedRoleOrGroup.srcElement.innerText
      };
    }

    // Check to see if the role already exists.
    let count = 0;
    for (let i = 0; i < this.currentRoles.length; i++) {
      if (selectedUserRole.SYS_RoleID === this.currentRoles[i].SYS_RoleID) {
        count++;
      }
    }
    // If the role already exists then admin must want to remove it, so filter it out
    if (count > 0) {
      this.currentRoles = this.currentRoles.filter(role => role.SYS_RoleID !== selectedUserRole.SYS_RoleID);
    }
    // If the role doesn't exist, then add the role
    else {
      this.currentRoles = [...this.currentRoles, selectedUserRole];
    }
}

在上面的component.ts函数中，角色被添加/删除，但是到目前为止，我还没有找到一种方法来手动取消选中项目被删除时的复选框。