获取布尔选项值

Question

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

这是我的 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;
  }

}

Answer 1

valueHTMLoption元素的属性只能是字符串。例如，这些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

为了通过其他什么比一个字符串ngModel的时候option被选中，使用[ngValue]绑定。如有限文档中所述：

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

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

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

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