获取布尔选项值答案

【问题标题】：Get boolean option values获取布尔选项值
【发布时间】：2019-05-13 17:17:35
【问题描述】：

我正在创建一个简单的客户管理应用。其中一项功能是过滤表格以列出活跃和不活跃的客户。我的问题是，当单击下拉列表时，我无法获得布尔值，即 true/false，但只有字符串“true”/“false”，因此我的过滤器不起作用。

这是我的html：

<strong class="ml-2">Active Status</strong>
<select class="ml-1" name="activeStatus" [(ngModel)]="activeStatus">
  <option></option>
  <option value=true>Active</option>
  <option value=false>Not Active</option>
</select>

我的表格过滤管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'tableFilters'
})
export class TableFiltersPipe implements PipeTransform {

  transform(list: any[], filters: Object) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = user => keys.every(key => user[key] === filters[key]);
    return keys.length ? list.filter(filterUser) : list;
  }

}

【问题讨论】：

试试[value]="true"
@SumeetKale 似乎没有什么不同！放在方括号里是什么意思？
你应该使用[ngValue]：<option [ngValue]="true">。
@ConnorsFan 这行得通！ ngValue 是如何工作的？

标签： angular filter boolean

【解决方案1】：

HTML option 元素的 value 属性只能是字符串。例如，这些select 选项具有字符串值：

<option value="First">Value 1</option>        // value: "First"
<option [value]="'Second'">Value 2</option>   // value: "Second"
<option [value]="myVar">Value 3</option>      // value: string value of myVar property

为了在选择option 时将字符串以外的任何内容传递给ngModel，请使用[ngValue] 绑定。如有限documentation中提到的：

@Input() ngValue: 任意 - 跟踪绑定到选项元素的值。与值绑定不同，ngValue 支持绑定到对象。

@Input() 值：任意 - 跟踪绑定到选项的简单字符串值元素。对于对象，使用 ngValue 输入绑定。

在您的情况下，您可以使用 [ngValue] 设置布尔值：

<option [ngValue]="true">Active</option>       // value: true (as boolean)
<option [ngValue]="false">Not Active</option>  // value: false (as boolean)

【讨论】：