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

我的组件中有以下数组：

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>

完整代码：

<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>

{{复选框[0]。标签}
{{复选框[1]。标签}
{{复选框[2]。标签}
{{复选框[3]。标签}
{{复选框[4]。标签}
包括下属
搜寻
重置

试试这个：

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

公共搜索（e）{
对于（让索引=0；索引

试试这个：

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

公共搜索（e）{
对于（让索引=0；索引

我看不出您将在哪里更改选中值的值？您必须使用

[（ngModel）]

或do

(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>

---

我看不出要在哪里更改选中值的值？您必须使用

[（ngModel）]

或do

(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>

---

---

你是在增加

e

，而不是

索引

你能创建一个小提琴链接吗？你是在增加

e

，而不是

索引

你能创建一个小提琴链接吗？这是我发布的，我有。@Drew1208没有。您正在增加

e

的值。我正在增加

索引
。这就是我发布的内容，我有。@Drew1208没有。您正在增加
e
的值。我正在增加
索引
。这样做只会导致一个错误，即
类型错误：无法读取未定义的属性“checked”
这只是伪代码，我不知道如何呈现复选框。如果您使用*ngFor等，但让我更新我的答案，我没有使用
*ngFor
，但这有助于解决问题。现在我需要弄清楚如何只允许用户选择一个复选框。我已经更新了答案，提供了一个例子。按照我的设置方式，我不能使用
*ngFor
，但我也很乐意。只能选择一个复选框，除了
下属
该复选框是唯一允许与另一个复选框一起选择的复选框。然后我需要知道选中了什么复选框以及文本字段输入。我更新了我的问题以显示完整的代码。我设置它的方式是只发送一个复选框，而不是全部复选框，因此
搜索
方法中的
console.log（）
只对第一个复选框有效。这样做只会导致一个错误，说
TypeError:Cannot read property'checked'of undefined
这只是伪代码，我不知道你是怎么处理你的复选框的。如果您使用*ngFor等，但让我更新我的答案，我没有使用
*ngFor
，但这有助于解决问题。现在我需要弄清楚如何只允许用户选择一个复选框。我已经更新了答案，提供了一个例子。按照我的设置方式，我不能使用
*ngFor
，但我也很乐意。只能选择一个复选框，除了
下属
该复选框是唯一允许与另一个复选框一起选择的复选框。然后我需要知道选中了什么复选框以及文本字段输入。我更新了我的问题以显示完整的代码。我设置它的方式是只发送一个复选框，而不是全部复选框，因此
搜索
方法中的
console.log（）
只对第一个复选框有效
public uncheckOtherCheckboxes(valueToKeep:number){
   this.checkBox.forEach(checkBoxElem => {
      if(checkBoxElem.value !== valueToKeep && checkBoxElem.checked){
         checkBoxElem.checked = false;
      }
   });
}