Question

我正在创建一个简单的客户管理应用程序。功能之一是通过表格进行筛选以列出活动和不活动的客户。我的问题是，当单击下拉列表时，我无法获得布尔值，即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

HTML value元素的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：任意- 跟踪绑定到选项元素的值。与值绑定不同，ngValue支持绑定到对象。

@Input（）值：任意- 跟踪绑定到该选项的简单字符串值元件。对于对象，请使用ngValue输入绑定。

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

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

Answer 2

我担心text之外的其他内容都将从HTML option中获取。来自MDN for HTML option：

允许的内容：文本，可能带有转义字符（例如é）。

值：如果选择此选项，则此属性的内容表示将与表单一起提交的值。如果省略此属性，则该值取自option元素的文本内容。

那么您所能做的就是为activeStatus设置一个传承人

_activeStatus

set activeStatus(val) {
  this._activeStatus = val === 'true' ? true : val === 'false' ? false : val;
}

get activeStatus() {
  return this._activeStatus;
}

获取布尔选项值

2 个答案: