在 Angular 中使用管道后对表数据进行排序和过滤答案

【问题标题】：Sorting and filtering table data after using a pipe in Angular在 Angular 中使用管道后对表数据进行排序和过滤
【发布时间】：2020-01-26 21:22:44
【问题描述】：

我有一个在表格中显示数据的控制器。我使用管道来转换视图中显示的数据。我问这个问题是因为我想在管道转换数据后找到对数据进行排序和过滤的通用方法。

用例：

用户在表中看到“是”，在我的模型中是布尔值。它将通过管道转换为是/否。

用户看到“状态”，而不是我模型中的数字 - 它已转换为文本。如何正确排序数据（按模型数量排序与按转换文本排序）

什么时候过滤我的数据 - 我有一个选项列表 - 所以可以通过模型值进行比较。

但是，如果我想进行“按文本搜索”过滤器 - 那么这将与排序几乎相同。

我只需要一个简短的例子/想法如何解决它：

在控制器中按名称查找管道，并使用它来转换数据（如果可能的话），
在控制器中使用类似的语法来使用管道（例如 item.column1 | boolean）（如果可能的话）

例子：

table.component.html

<table class="table table-bordered table-striped table-hover">
    <thead>
        <tr class="text-center">
            <th style="min-width: 128px;">
                Index
            </th>

            <th style="width: 25%;">
                Column1
            </th>

            <th style="width: 25%;">
                Column2
            </th>

            <th style="width: 50%;">
                Column3
            </th>
        </tr>
    </thead>

    <tbody>
        <tr *ngFor="let item of items; let i = index">


            <td>
                {{ i }}
            </td>

            <td>
                {{ item.column1 }}
            </td>

            <td>
                {{ item.column2 | itemStatus }}
            </td>

            <td>
                {{ item.column3 | boolean }}
            </td>
        </tr>
    </tbody>
</table>

item-status.pipe.ts

@Pipe({
  name: 'itemStatus'
})
export class ItemStatusPipe implements PipeTransform {

  transform(value: number, ...args: any[]): any {
    if (value <= 5) {
      return "Registered";
    }

    if (value <= 10) {
      return "Accepted";
    }

    if (value <= 20) {
      return "In progress";
    }

    if (value <= 50) {
      return "Delivered";
    }

    return "Not Accepted";
  }

}

boolean.pipe.ts

@Pipe({
  name: 'boolean'
})
export class BooleanPipe implements PipeTransform {

  transform(value: boolean, ...args: any[]): any {
    if (value === true) {
      return "Yes";
    }

    if (value === false) {
      return "No";
    }

    return "";
  }

}

item.ts

export class Item {
  column1: string;
  column2: number;
  column3: boolean;
}

table.component.ts

  items: Item[] = [
    { column1: 'name1', column2: 5, column3: true },
    { column1: 'name2', column2: 10, column3: false },
    { column1: 'name3', column2: 15, column3: true },
    { column1: 'name4', column2: 20, column3: false },
    { column1: 'name5', column2: 25, column3: true },
    { column1: 'name6', column2: 50, column3: false }
  ];

【问题讨论】：

您是否尝试过将函数传递给您的管道？您可以传递一个比较器函数和一个过滤器函数。

标签： angular

【解决方案1】：

我猜@bhantol1 描述的内容类似于：

import { Pipe } from "@angular/core";

export type sortingFunction = (array: Item[]) => Item[];

@Pipe({ name: 'testSort' })
export class Pipesorter {

    transform(value: sortingFunction, itemList: Item[]): Item[] {
        return value(itemList);
    }

}

如果你想使用一个回调函数，但是这不是真的那么可重用，你还需要做的是创建那些回调函数。

说实话，我认为我根本不会喜欢这种方法。我宁愿选择一种可以处理您想要的不同排序的静态方法。或者甚至更好地通过行为主题利用可观察对象，并将列表排序到您希望它们排序的位置。如果您的代码出现在多个位置，请针对这些场景使用静态方法。

【讨论】：