多复选框循环创建并获得价值

Question

我试图找到最适合使用Checkbox的选项，您可以在其中进行多项选择，并且当您将表单打开到编辑模式时，所有选择的值都显示选中标记

任何建议最欢迎

*我正在尝试提交多选复选框，但是我可以对其进行编辑，如果有人有任何想法请帮助我，它不会显示选中的复选框*

或者您可以通过formcontrolName的“多选”复选框帮助我，在那里保存并查看表单的值

HTML代码

    <tr *ngFor="let roleObj of roleNameList" class="outer-border">
                    <td id="tag" class="text-center">
                      <mat-checkbox (change)="selectRoleID($event)" ng-selected="true"  [(ngModel)]="checked" [id]=roleObj.roleId value="{{roleObj.roleId}}"></mat-checkbox>
                      <td id="tag">{{roleObj.roleName}}</td>
                      <td id="tag">For {{roleObj.roleName}} Users</td>
                  </tr>

在这里，我从复选框中获得价值，可以提交 打字稿代码

onSubmitMethod() {
    let roleObj: any = {};
    roleObj['userId'] = this.getUserId;
    roleObj['roleId'] = this.selectedRoleNameList;
    this.newService.setUserRoleWrapperDetails(roleObj)
      .subscribe(data => {
        if (data.id == null) {
          alert("Role Not Assign");
        }
        else {
          alert("Your Data  has been updated successfully!!! ");
          this.newService.pageRefresh();
        }
      });
  }



selectRoleID(event) {
    console.log(event);
    console.log(event.checked);
    console.log(event.source);
    console.log(event.source.value);

    let checkBoxevent = event.checked;
    let selectedValue = event.source.value;
    if (checkBoxevent) {
      this.selectedRoleNameList.push(selectedValue);
    }
    else {
      const index: number = this.selectedRoleNameList.indexOf(selectedValue);
      if (index !== -1) {
        this.selectedRoleNameList.splice(index, 1);
      } 
    }

  }