angular - Angular 选择的选项也更新为其他 id

Question

我有一定的许可，当我对某个 id 给予一定的许可时，它也会反映到其他 id 上。考虑有 7 个权限。在我选择并保存它们之后，如果我转到下一个项目选择选项，我选择的前一个 id 也将在其中被选中，当我取消选中它时，它也会反映给其他人。此外，如果我仅选择 7 个选项中的 3 个并保存它，然后注销并登录，则只有 3 个选项将保留在选择选项中，其他选项将被删除。

组件.html

<a class="permission" data-toggle="modal" (click)="onSelect(person)" data-target="#permissionModal">
  <img src="../../../assets/images/padlock.png" alt=""> &nbsp;
</a>

<div class="modal" id="permissionModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Permissions</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <form>
          <table class="table">
            <thead>
              <tr>
                <th scope="col">Permissions</th>
                <th scope="col">Select/Unselect</th>
              </tr>
            </thead>
            <tbody *ngFor="let val of dropdown_data">
              <tr>

                <td>
                  {{val}}
                </td>

                <td>
                  <label class="container-1">
                    <input type="checkbox" required value="{{val}}" (change)="onCheckboxChange(val,$event)" name="check" #check>
                    <span class="checkmark"></span>
                  </label>
                </td>
              </tr>
            </tbody>
          </table>
          <button type="button" class="btn btn-primary pull-right" (click)="addPermission()">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

组件.ts

//get permission 

this.Authentication.get_permissions().subscribe(res => {
  this.permissionList = res;
  console.log(this.permissionList[0].permission_list);
  console.log(this.permissionList);
  console.log(this.permissionList);

  for (let val of this.permissionList) {
    this.dropdown_data = this.permissionList[0].permission_list
    this.id = val.group_id
  }
})

//select permission
onCheckboxChange(val, event) {
  if (event.target.checked) {
    this.checkedList.push(val);
  } else {
    for (var i = 0; i < this.dropdown_data.length; i++) {
      if (this.checkedList[i] == val) {
        this.checkedList.splice(i, 1);
      }
    }
  }
}

//add permission

addPermission() {
  let permissions = {};
  permissions['group_id'] = this.rolesid;
  permissions['permission_list'] = this.checkedList;
  console.log(permissions)

  this.Authentication.add_permission(permissions)
    .subscribe(res => {
      this.individualPermission = res;
      // this.individualPermission=permissions;
      console.log(this.individualPermission);
      console.log('added')
    },
    err => {
      console.log('error');
    });
}

服务.ts

// get permissions
get_permissions() {
  var headers = new HttpHeaders().set('Authorization', 'Token ' +
    localStorage.getItem('usertoken'));
  var options = {
    headers: headers
  };
  return this.httpClient.get('/api/auth/permission_list/', options)
}

// send permissions

add_permission(data) {
  var headers = new HttpHeaders().set('Authorization', 'Token ' +
    localStorage.getItem('usertoken'));

  var options = {
    headers: headers
  };
  return this.httpClient.post('/api/auth/permission_list/', data,
    options)
}

标签： angularformsangular5angular6