Question

我的组件中有以下数组：

checkBox = [
        {label: 'SSN', name:'ssn', value: '1', checked:false},
        {label: 'Last Name', name:'lastName', value: '2', checked:false},
        {label: 'Role', name:'role', value: '3', checked:false},
        {label: 'UserId', name:'userId', value: '4', checked:false},
        {label: 'Office', name:'office', value: '5', checked:false},
        {label: ' Include Subordinates', name:'subordinates', value: '6', checked:false}
    ];

我的视图中有几个复选框，如下所示：

<span class="input-group-addon">
          <input type="checkbox" name="ssn" (change)="checkBox[0].checked">
        </span>

和

<span class="input-group-addon">
          <input type="checkbox" name="lastName" (change)=checkBox[1].value>
        </span>

等...

然而，当我提交按钮时：

<button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>

我在组件中得到输出false，即使它被选中了一个而我只得到一个假而不是6（它们是6个复选框）

我假设我会得到false, false, True, False, False, False因为我需要知道选中了哪个复选框

  public search(e){

        for (let index = 0; index < e.length; e++){
            console.log(e[index].checked)
        }

    }

完整代码：

<form>
        <div class="col-lg-6 col-lg-offset-3 text-center bordered">
            <div class=" col-xs-6 ">
                <div class="row">
                    <div class="col-md-12 box-content right">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[0].label}}</label>
        </span>
                            <input #ssn type="password" name="ssnText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 box-content right">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="lastName" (change)="checkBox[1].checked=!checkBox[1].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[1].label}}</label>
        </span>
                            <input type="text" #lastName name="lastNameTest" class="form-control" placeholder="">
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-12 box-content right">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="role" (change)="checkBox[3].checked=!checkBox[3].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[2].label}}</label>
        </span>
                            <input type="text" #role name="roleText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>
            </div>

            <div class=" text-center col-xs-6">
                <div class="row">
                    <div class="col-md-12 box-content ">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" name="userId" (change)="checkBox[4].checked=!checkBox[4].checked">
        </span>
                            <span class="input-group-addon">
          <label>{{checkBox[3].label}}</label>
        </span>
                            <input type="text" #userId name="userIdText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 box-content ">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" value="{{checkBox[4].value}}">
        </span>
                            <span class="input-group-addon">
          <label for="office">{{checkBox[4].label}}</label>
        </span>
                            <input type="text" #office id="office" name="officeText" class="form-control" placeholder=" ">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 box-content ">
                        <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox"  #subordinates name="subText" (change)="checkBox[5].checked=!checkBox[5].checked">
        </span>
                            <span class="input-group-addon">
          <label>Include Subordinates</label>
        </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="center-block">
                <button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>
                <button type="submit" class="btn btn-default btn-md right-button">Reset</button>
            </div>
        </div>
    </form>

Answer 1

试试这个：

public search(e){
    for (let index = 0; index < e.length; index++){
        console.log(e[index].checked)
    }
}

Answer 2

我不知道您在哪里更改已检查值的值？您必须使用[(ngModel)]或执行

(change)="checkbox[index].checked=!checkbox[index].checked"

如果您使用*ngFor：

呈现复选框

<span class="input-group-addon" *ngFor="checkBoxElem of checkBox">
     <label>{{checkBoxElem.label}}</label>
     <input type="checkbox" name="checkBoxElem.name" [(ngModel)]="checkBoxElem.checked">
</span>

只允许一次选中一个复选框（只是一个想法，可能有一个更清洁的解决方案）：

<span class="input-group-addon" *ngFor="checkBoxElem of checkBox">
     <label>{{checkBoxElem.label}}</label>
     <input type="checkbox" name="checkBoxElem.name" [(ngModel)]="checkBoxElem.checked" (change)="uncheckOtherCheckboxes(checkBoxElem.value)">

并在你的component.ts中：

public uncheckOtherCheckboxes(valueToKeep:number){
   this.checkBox.forEach(checkBoxElem => {
      if(checkBoxElem.value !== valueToKeep && checkBoxElem.checked){
         checkBoxElem.checked = false;
      }
   });
}

在视图Angular 2中更改数组中的布尔值

2 个答案: