按布尔值筛选 angular

Question

我正在尝试按用户状态进行过滤，“Ativo”表示在线，“Inativo”表示离线，但是按字符串过滤让我有些头疼，因为当我输入“ativo”时，所有离线用户仍然出现，因为“ativo”这个词存在于“inativo”中。所以我想给 'inativo' 附加一个假值，给 'ativo' 附加一个真值。

关于我该怎么做的任何提示？ I still what the filter to show "Ativo" and "Inativo" as the options in the datalist, but when selected it should send a true or false value to the filter function

这是 html 和我在 ts 上创建的函数

<input type="text" list="status" placeholder="Status" (keyup)="updateFilter($event)" id="stat">   
    <datalist id="status">
      <option>Ativo</option>
      <option>Inativo</option>
    </datalist>

updateFilter(event: Event) {
    this.filterValue = (event.target as HTMLInputElement).value;    
    this.dataSource.filter = this.filterValue.trim().toLowerCase();
    console.log(this.dataSource.filter);

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

Answer 1

Angular Material 提供了一种方式来说明如何通过 filterPredicate 方法将过滤器应用于数据：https://material.angular.io/components/table/api#MatTableDataSource

为您的数据源提供一个箭头函数，说明值应该严格相等而不是相同应该可以解决您的问题。

this.datasource.filterPredicate = (data: YourDataType, filter: string) => {
  return data.status === filter;
};

Answer 2

首先，如果您的过滤器具有严格的值，则不应使用数据列表，而应使用 select。它的工作原理相同，但不允许用户输入。

现在，您没有理由遇到这种问题。只需检查 (event.target as HTMLInputElement).value === 'ativo' 是否足够。

我建议创建一个枚举以避免代码中出现魔术字符串，因此您将使用 UserStatus.ativo.

而不是 'ativo'

Answer 3

您可以使用正则表达式来做到这一点：

var myString = 'ativio';
var myString2 = 'inativio';

new RegExp('\bativio\b').test(myString); // true

new RegExp('\bativio\b').test(myString2); // false

按布尔值筛选 angular

Filter by boolean value angular

boolean

filter

typescript

angular