Question

我需要一个具有选定复选框值的数组。

这是我的html：

TrustStore

我的功能是：

<form [formGroup]="form" class="charts">
    <label formArrayName="charts" *ngFor="let chart of charts" id="form_charts">
        <input type="checkbox" value={{chart.title}} (change)="selected_chart($event)">
        {{chart.title}}
        <span class="checkmark"></span>
    </label>
</form>

我有数组，但是当我们取消选择值时仍然存在；如何从数组中弹出该值？任何帮助将不胜感激

Answer 1

您可以在这样的频道中使用$event.srcElement

<input type="checkbox" (change)="selected_chart($event.srcElement)">

并通过input: HTMLInputElement

获得价值

selected_chart(input: HTMLInputElement) {
    input.checked === true
      ? console.log('true')
      : console.log('false');
  }

在stackblitz上测试

Answer 2

您可以使用$event来检测更改

 <label> Checkbox 1</label>
<input type="checkbox" name="checkbox1" (change)="selected_chart($event)">
<label> Checkbox 2</label>
<input type="checkbox" name="checkbox2" (change)="selected_chart($event)">
<br>
<label> Check box Status</label>
  Check box 1 : {{selected_checkbox.checkbox1}}
<br>  
  Check box 1 : {{selected_checkbox.checkbox2}}

在component.ts中创建一个对象，以便您可以切换更改事件

selected_checkbox = {};
   selected_chart(event) {
     this.selected_checkbox[event.target.name] = event.target.checked;
  }

检出Stackblitz Example

Answer 3

你不能使用这样的东西吗？

<form [formGroup]="form" class="charts">
<label formArrayName="charts" *ngFor="let chart of charts" id="form_charts">
  <input type="checkbox" value={{chart.title}} [(ngModel)]="chart.checked">
  {{chart.title}}
  <span class="checkmark"></span>
</label>

然后，图表数组的每个项目都将具有相应的选中属性。当您要计算 charts_selected 数组时，可以迭代图表数组，并按以下步骤进行操作。

  calculateSelectedArray() {
for (const chart of this.charts) {
    if (chart.checked) {
    this.charts_selected.push(chart.something);
    }
}

}

Answer 4

所以我只是注意到这种方式会有所帮助。
您应该按当前标题的位置保存复选框，现在您的代码是将布尔值推入数组，这无法告诉您它实际代表什么值。
因此我们可以像这样简单地将值保存到数组中：

 <form [formGroup]="form" class="charts">
  <label formArrayName="charts" *ngFor="let chart of charts; ; let i = index" id="form_charts">
  <input type="checkbox" value={{chart.title}} (change)="selected_chart(i)">
  {{chart.title}}
  <span class="checkmark"></span>
</label>

selected_chart(i: number) {
  this.selected_checkbox[i] = !this.selected_checkbox[i];
}

无论您何时选中复选框，我们都只需反转其在数组中的值即可。

如何在Angular 4中存储选定的复选框值？

4 个答案: