angular - 获取 boolean 选项值

Question

我正在创建一个简单的客户管理应用程序。其中一项功能是过滤表格以列出活跃和不活跃的客户。我的问题是，当单击下拉列表时，我无法获得 boolean 值，即 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;
  }

}

Answer 1

value HTML 的属性 option元素只能是字符串。例如，这些 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]捆绑。如有限 documentation 中所述:

@Input() ngValue: any - Tracks the value bound to the option element. Unlike the value binding, ngValue supports binding to objects.

@Input() value: any - Tracks simple string values bound to the option element. For objects, use the ngValue input binding.

在您的情况下，您可以使用 [ngValue]设置 boolean 值:

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