如何使用angular2获取选中和取消选中的值

Question

我有一个从API提取并以HTML显示的项目列表。 但是该列表被禁用，我无法检查和取消选中值。

我的要求：

1. I want `HasHomeDashboard`to be disabled and it must be active always.
2. I must be able to check and uncheck the checkboxes except `HasHomeDashboard`.
3. On click of `save Changes`, i want to get in console in this format 

TS：

saveSidebar() {
     let params = { UserId: 1209 }
    console.log(params,"params")
  }

我希望控制台参数如下所示：基于0和1的check和uncheck值。

 {
                "Id": "1",
                "HasHomeDashboard": "1",
                "HasUserManagement": "1",
                "HasDicom": "1",
                "HasEMR": "1",
                "HasCaseManagement": "1",
                "HasSystemSettings": "0",
                "HasReport": "1",
                "UserId":"1209"
    }

演示版

Answer 1

如果您想在ts中这样做，可以这样做（它可以正常工作）。

  selectedMenu(evt, item) {
    let keyTemp: string = item.key.toString();
    let valueTemp = item.value;
    this.userMenu[0][keyTemp] = this.boxChecked(item.value);
  }

  boxChecked(value: any) {
    if (value === 0) 
      return 1;
    else
      return 0;
  }

希望能有所帮助，再见

Answer 2

我已经修改了一些代码，

HTML：

<div *ngFor="let item of objectToArray(menu)">
          <input
            type="checkbox" 
             [checked]="item.value" 
            (click)="selectedMenu($event.target.checked, item)"
            [disabled]="item.IsDisabled">
          <span class="nav-text p-l10">{{item.key}}</span>
</div>

TS：

objectToArray(object) {
    const keyValues = [];
    for(let key in object) {
      if(key !== 'Id') {
        const objectToPush = {
          key,
          value: (key == 'HasCaseManagement') ? 1 : object[key],
          IsDisabled: (key == 'HasCaseManagement')
        };
        keyValues.push(objectToPush);
      }
    }
    this.selectedMenuIds = keyValues;
    return keyValues;
  }

  selectedMenu(evt, item) {
    this.userMenu[0][item.key] = this.swapChecked(item.value);
    this.selectedMenuIds[0] = item.value;
  }

  saveSidebar() {
    let params = { Id: 1209, HasCaseManagement:"" }
    this.selectedMenuIds.push(params);
    console.log(this.selectedMenuIds)
  }

  swapChecked(value: any) {
    return (value === 0) ? 1 : 0
  }