如何在 Angular 5 中检查显示列表

Question

我在我的应用程序中为添加和编辑列表用户开发功能，当我添加用户时，我检查了这一点，它可以工作，但是编辑用户时出现问题， 我想显示被检查的用户列表，所以问题是：如何显示被检查的选项。 我用 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)
      })
  }

Answer 1

你可以这样使用：

 <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;
}