Как показать список проверенных в Angular 5 - PullRequest
Новая
       14

Как показать список проверенных в Angular 5

0 голосов
/ 15 ноября 2018

Я разрабатываю функцию для добавления и редактирования списка пользователей в моем приложении, когда я добавляю пользователя, я только что проверил это, это работает, но проблема при редактировании пользователя, Я хочу показать список пользователей, которые проверены, поэтому вопрос заключается в следующем: как отобразить параметры, которые проверены. я разрабатываю приложение с Angular 5 код 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');

часть .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="{{user.Libelle}}" name="optapp" id="{{user.UID}}">
                                <span class="input-span"></span>
                                {{user.Libelle}}
                              </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>

и этот файл .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)
      })
  }

1 Ответ

0 голосов
/ 15 ноября 2018

Вы можете использовать что-то вроде этого: 

 <div class="check-list mlist" *ngFor='let user of users; let i = index'>
   <label class="ui-checkbox">
     <input type="checkbox" (change)="setUser($event.target.checked, i)" [checked]="user.checked" />

Что это будет делать, если изменение значения входа вызовет (изменение). Это изменение может изменить значение пользователя.

Итак, что вы можете сделать в компоненте: 

public setUser(_value: any, _index: number) {
  this.users[_index].checked = _value;
}
...