Angular 2根据条件选择或取消选择复选框答案

【问题标题】：Angular 2 select or deselect checkboxes on conditionAngular 2根据条件选择或取消选择复选框
【发布时间】：2017-05-20 01:07:01
【问题描述】：

请注意，我想避免使用 jquery 并仅使用 Angular 2。话虽如此，这里是 PLUNK

我有一些自定义复选框，最初可以选择多个。我将所选项目存储在这样的数组中：

    eventChkArr: any = [];
    updateChecked(value: any, event: any) {
        if (event.target.checked) {
          this.eventChkArr.push(value);
        }
        else if (!event.target.checked) {
          let index = this.eventChkArr.indexOf(value);
          this.eventChkArr.splice(index, 1);
        }
      }

当用户选择多个复选框时，会弹出一个模式（由于某种原因，此模式没有在 plunk 中弹出）并询问他们是否要选择多个复选框。现在，我想要做的是，如果用户没有点击任何按钮，那么只有在模式弹出窗口之前最后点击的按钮将保持选中状态，并且在用户进一步点击时，一次只会选择一个复选框。如果他们单击“是”，则可以选择多个复选框。但是，我该如何实现，有什么帮助吗？ TIA。

【问题讨论】：

标签： angular typescript checkbox

【解决方案1】：

https://plnkr.co/edit/yU4P3zsQ3QaH9Vby8M3I?p=preview

您可以将每个复选框的选中值保存在'eventTypeChkBox'数组中：

 eventTypeChkBox: Array<{chkBoxImageUrl: string, id: string, val: string, checked: boolean}> = [
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg" ,id: "item-1", val: "1", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-2", val: "2", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-3", val: "3", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-4", val: "4", checked: false}
  ];

现在您可以将“checked”的值放入每个复选框的 [(ngModel)] 中：

<div *ngFor="let eventChk of eventTypeChkBox">
   <div class="col-md-3">
      <label class="btn-custom">
          <img src="{{eventChk.chkBoxImageUrl}}" alt="{{eventChk.val}}" class="img-check img-circle" [ngClass]="{'check': eventChk.isClassVisible } "
                       width="100" height="100">
                  <input  [(ngModel)]="eventChk.checked" (ngModelChange)="onModelChange(eventChk) type="checkbox" name="{{eventChk.id}}" id="{{eventChk.id}}" value="{{eventChk.val}}" class="hidden" autocomplete="off"
                         (change)="updateChecked(eventChk, $event); eventChk.isClassVisible = !eventChk.isClassVisible;">
                </label>
                <p>{{eventChk.val}}</p>
              </div>
            </div>

** 如果你想使用 [(ngModel)] 指令：

1.您应该在“AppModule”中导入“FormsModule”：

import {FormsModule} from "@angular/forms";
@NgModule({
  imports: [ BrowserModule, FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

2。您需要为每个“复选框”输入添加不同的“名称”属性，这就是我在 html 中使用 name="{{eventChk.id}}" （您需要唯一名称）的原因

当您拥有 [(ngModel)] 时，您可以控制检查的内容和不检查的内容。

如果您想检测模型更改，您可以在模板和类上使用 (ngModelChange)="onModelChange(eventChk)" ：

 onModelChange(eventTypeChkBoxObj) {
    if(eventTypeChkBoxObj.checked) {
      if(this.getCheckedCount() == 2){
        let result = confirm("Multiple checkboxes?");
        if(!result) eventTypeChkBoxObj.checked = false;
      }  
    }

  }

要检查的项目值你不需要'eventChkArr'，你可以过滤它们：

getCheckedValues() {
   return this.eventTypeChkBox.filter(obj => obj.checked).map(obj => obj.val)
}

检查的 obj 计数：

 getCheckedCount():number{
    return this.getCheckedValues().length;
  }

例如：

 eventTypeChkBox = [{checked:true, val:1},{checked:true, val:2},{checked:false, val:3}]

getCheckedValues() 将返回：

["1","2"]

祝你好运！

【讨论】：

哦，非常感谢。我遇到了这种类型的解决方案，但无法决定它是否适用于我的情况。但是您的回答有点指向我想要实现的目标。谢谢。

【解决方案2】：

我建议你这个逻辑：

<button *ngIf="eventChkArr.length > 1" (click)="popFisrtEvents()">Many choice ?</button>

以及方法：

popFisrtEvents() {
    this.eventChkArr.splice(0, this.eventChkArr.lentgh -2);
}

所以您在单击复选框时不会阻止用户...

【讨论】：