Html 将同一属性绑定到两个复选框

我的页面中有两个复选框，我想将复选框值指定给我的属性。现在我已经创建了复选框，但是当我将它们绑定到同一个属性时，它们开始在视图中一起触发，这是我不想要的。我有

alignment

属性，该属性将是获取left或right复选框的值。我怎样才能做到这一点

<div class="row clearfix">
 <ul class="list-group">
   <li class="list-group-item">
    Left 
    <div class="material-switch pull-right">
     <input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox" [(ngModel)]="addProfile.alignment"/>
      <label for="someSwitchOptionDefault" class="label-default"></label>
      </div>
   </li>
 </ul>
</div>
<div class="row clearfix">
 <ul class="list-group">
  <li class="list-group-item">
   Right
   <div class="material-switch pull-right">
   <input id="switch" name="switch" type="checkbox" [(ngModel)]="addProfile.alignment"/>
   <label for="switch" class="label-default"></label>
   </div>
  </li>
 </ul>
</div>

左边




赖特

通过将两个复选框分别绑定到对变量进行不同解释的getter/setter属性，可以使这两个复选框修改相同的变量。在下面的模板中，使用了两种不同的属性：

<div>
  <input type="checkbox" [(ngModel)]="isLeftAligned">Left
</div>
<div>
  <input type="checkbox" [(ngModel)]="isRightAligned">Right
</div>
<div>
  Alignment: {{strAlignment}}
</div>

请参见演示

---

另一种方法是使用单选按钮而不是复选框。

您必须使用两个不同的变量您希望行为是什么？如果两个复选框设置为不同的值，则应将

对齐设置为什么？有一个右标记的复选框和一个左标记的复选框。我在这里有一个段落，它将通过接受alignment属性的值来将自己放在页面中。所以，若它是左边的，那个么段落将放在左边，若它是右边的，那个么段落将放在页面的左边。因此，我只是尝试将
alignment
属性与两个复选框绑定，这样，如果选中一个复选框，那么它的值将分配给
alignment
属性。您的答案让我对自己的解决方案有了一种想法，这个解决方案也是正确的，但我无法在代码中实现它，因为我的alignment属性即将出现来自DTO，该DTO将把对齐属性数据带到服务中，该服务正在调用asp.net中的方法。不管怎样，谢谢你的帮助答案是问题的答案，你可以用
[（ngModel）]
将一个变量绑定到一个输入元素。
enum Alignment {
  None,
  Left,
  Right,
}

export class AppComponent {

  private alignment = Alignment.None;

  get isLeftAligned(): boolean {
    return this.alignment === Alignment.Left;
  }
  set isLeftAligned(value: boolean) {
    if (value) {
      this.alignment = Alignment.Left;
    } else {
      this.alignment = Alignment.None;
    }
  }

  get isRightAligned(): boolean {
    return this.alignment === Alignment.Right;
  }
  set isRightAligned(value: boolean) {
    if (value) {
      this.alignment = Alignment.Right;
    } else {
      this.alignment = Alignment.None;
    }
  }

  ...    
}