使用角度7中的复选框检索所有性别值答案

【问题标题】：Retrieving all gender values using checkbox in angular 7使用角度7中的复选框检索所有性别值
【发布时间】：2025-12-11 05:40:01
【问题描述】：

我有一个 Angular 应用程序，可让我按性别过滤样本。过滤是通过复选框完成的。基本上，用户检查男性、女性或两者来检索样本。到目前为止，我已经完成了根据复选框选择提供男性或女性。如果没有选中复选框，那么我会返回所有性别。此外，如果他们选择男性或女性复选框，我也会返回正确的样本列表。现在的问题是，如果用户选中所有复选框，他们显然期望所有性别。但我什么也不回。因为我将性别作为数组，如果用户选择所有性别，它将变为gender = ['male', 'female']。服务器查找性别为malefemale。因此它什么也不返回。如果他们选择所有性别，我如何检索所有性别？

这是我的 HTML 模板：

<label for="gender"><strong>Gender: </strong></label>
     <div *ngFor="let f of genderList" class="checkbox">
          <label for="gender{{ f.value }}">
          <input type="checkbox" id="gender{{ f.value }}" (change)="onGenderToggle(f.value, $event)"> {{ f.display }}
     </label>
</div>

在我的组件中，我将sampleParams 定义为sampleParams: any = { gender: []};，将genderList 定义为genderList = [{value : 'male', display: 'Males'}, {value: 'female', display: 'Females'}];

我在onGenderToggle 处控制复选框，功能如下：

onGenderToggle(genderValue, $event) {
  if ($event.target.checked) {
    this.sampleParams.gender.push(genderValue);
  } else {
    const index = this.sampleParams.gender.indexOf(genderValue);
    this.sampleParams.gender.splice(index, 1);
  }
}

请注意，由于我已成功加载列表，因此我没有提供服务代码。我已经尝试使用下拉菜单和单选框。但这些提供了男性或女性样本列表。任何帮助将不胜感激！

【问题讨论】：

标签： html angular typescript

【解决方案1】：

关于您以后如何过滤数据的解释很少。但一个简单的解决方案是伪代码......

如果数组长度 = 2，则如果 db 或列表中的元素等于男性或列表中的元素等于女性返回元素。

这也可能只是你如何发送数据或如何处理数据的问题，没有额外的信息很难说

【讨论】：

【解决方案2】：

如果您的后端需要malefemale，最简单的解决方案就是检查数组的长度，如果是2，则都检查...

比如……

if (this.sampleParams.gender.length === 2) {
  const param = 'malefemale';
}
this.myService.fetchData(param).subscribe(....)

【讨论】：