How show list checked in Angular 5

I develop function for added and edit list users in my application, when i add user just i checked of this, it's work, but the problem when edit user, I want to show list of users that are checked, so the question is: how to display the options that are checked. i develop the application with Angular 5 code of edit.ts:

processEdit(form) {
  var form = form.currentTarget.parentElement.parentElement;
  var UID = $(form).find('#UIDInput').val();
  var RoleName = $(form).find('#RoleNameInput').val();

  let checked;
  let checked_name;
  let c = Array<AUserRole>();
  $('input:checkbox[name="optapp"]').each(function (i) {
    checked_name = $(this).val();
    checked = $(this).attr('id');
    let isSelected = $(this).prop('checked');
    if (isSelected) {
      let newapp = new UserRole();
      newapp.UserName = checked_name;
      newapp.UserId = checked;
      c.push(newapp);
    }
  });
  let d: any = Array<UserRole>();
  Helpers.setLoading(true);
  let u = new Role;
  u.IsAdministrateur = this.IsAdministrateur;
  u.RoleName = RoleName;
  for (var i = 0; i < c.length; i++) {
    u.UserRoles = new UserRole();
    let k = new ApplicationRole();
    k.RoleName = RoleName;
    k.UserName = c[i].UserName;
    k.UserId = c[i].UserId;
    d.push(k);
    u.UserRoles = d[i];
  }
  u.UserRoles = d;
  u.UID = UID;
  u.RoleName = RoleName;
  this.edit(u);
  Helpers.setLoading(false);
  $('.modal').modal('hide');

part of .html:

<form #frmEdit="ngForm">
                <div class="row">
                  <div class="col-md-12 form-group" hidden>
                    <input class="form-control" id="UIDInput" value="">
                  </div>
                  <div class="col-md-12 form-group">
                    <label><b>Libelle :</b></label>
                    <input class="form-control" type="text" placeholder="Libelle" id="RoleNameInput" ngModel #_qn="ngModel" name="_qn">
                    <div *ngIf="_qn.invalid && (_qn.dirty)" class="text-danger">
                      <div *ngIf="_qn.errors.required">Libelle is required.</div>
                      <div *ngIf="!_qn.errors.valid && !_qn.errors.required">Invalid Libelle.</div>
                    </div>
                  </div>
                </div>
                  <div class="m-section">
                    <div class=" form-group">
                      <label class="menu"><b>My Users:</b></label>
                      <div class="form-group" style="margin-left:30px">
                        <div class="row">
                          <div>
                            <div class="check-list mlist" *ngFor='let user of users'>
                              <label class="ui-checkbox">
                                <input type="checkbox" value="" name="optapp" id="">
                                <span class="input-span"></span>
                                
                              </label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>                            
                <br />
                <div>
                  <button class="btn btn-sm btn-primary" (click)="processEdit($event)">submit</button>
                  <button data-dismiss="modal" class="btn btn-sm btn-default">cancel</button>
                </div>
              </form>

and this file .service.ts:

async editRole(role: Role) {
    let result = await this.http.put(this.pathAPI + 'role', role)
      .toPromise()
      .then(function (res) {
       // alert(res)
      })
      .catch((err) => {
        return (err)
      })
  }