Question

我有一个应用程序表，有两列 - appAcronym和appName。大约有250行应用程序。我希望在表格/标题上实现搜索，以便通过appAcronym进行过滤，以便用户可以快速访问所需的行。

这就是数据的样子：

export interface App {
appId: number;
appName: string;
appAcronym: string;
}

这是我的申请表

<table class="table table-striped table-hover table-sm" *ngIf="appsList">
        <thead>
            <tr>
                <th scope="col">Acronym</th>
                <th scope="col">System Name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let app of appsList">
                <td>{{ app.appAcronym }}</td>
                <td>{{ app.appName }}</td>
            </tr>
        </tbody>
    </table>

这是我尝试实施管道

import { Pipe, PipeTransform } from '@angular/core';
import { App } from './components/applevel/applevel.component';
@Pipe({ name: 'searchByAcronym' })

export class SearchByAcronymPipe implements PipeTransform {
transform(appslist: App[], searchText: string, appAcronym: string) {

}

我不熟悉管道，你可以看到我已经将转换的内部留空了。管道是这项工作的最佳工具吗？如果是这样，你能建议如何使这个工作？理想的实现方法是在表的Acronym标题上进行搜索。但外部搜索栏也有效。

Answer 1

您可以克隆此repo，以获取使用bootstrap列标题进行排序和筛选的示例。 https://github.com/almcaffee/angular-example1

您不需要管道，管道用于格式化数据。您需要进行一些过滤，或者每次使用sort / filter参数进行api调用。上面的示例使用静态数据集作为后端服务。将它克隆到一个文件夹，npm i，在localhost上运行它，看看它的行为，查看代码，看看它在做什么。

如何实现搜索栏来过滤表格？

1 个答案: