我正在创建一个简单的客户管理应用程序。其中一项功能是过滤表格以列出活跃和不活跃的客户。我的问题是,当单击下拉列表时,我无法获得 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;
}
}
最佳答案
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)
关于angular - 获取 boolean 选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53745774/