Question

我有一个数组，可以为老师提供信息。我有一个列出这些老师的清单组件。我想要一个组合框并对此数组进行过滤。

这是我的数组

private _infoList: Array<AcademicPersonnelInfoModel> = [
  {
    id: '1',
    title: 'Prof. Dr.',
    firstName: 'Atakan',
    lastName: 'bir'
  },
  {
    id: '2',
    title: 'Prof. Dr.',
    firstName: 'Atakan',
    lastName: 'iki'
  },
  {
    id: '3',
    title: 'Prof. Dr.',
    firstName: 'Atakan',
    lastName: 'uc'
  },
];

这是我的.html

<div class="col top-bar">
    <div class="container">

        <div class="tab-content">
            <div class="tab-pane active">


                <input type="text" ng-model=search.accountName>
                <select ng-model="search.id" id="">
                    <option value=''>All</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                </select>

                <table ng-table="tableParams" class="table">
                    <tr ng-repeat="account in $data  | filter:search.lastName | filter:search.id">
                        <td data-title="'id'">
                            {{account.account.accountId.id}}
                        </td>
                        <td data-title="'lastName'">
                            {{account.account.accountName}}
                        </td>

                    </tr>
                </table>

            </div>
        </div>
    </div>
</div>

我应该在打字稿中做什么才能过滤此列表？

这是我的ts文件

export class AcademicPersonnelListComponent implements OnInit {

/** */


/** */
private _academicPersonelList: Array<AcademicPersonnelInfoModel> = [];
public get academicPersonelList(): Array<AcademicPersonnelInfoModel> {
    return this._academicPersonelList;
}

我有一个数组，可以为老师提供信息。我有一个列出这些老师的清单组件。我想要一个组合框并对此数组进行过滤。

Answer 1

Angular 2+内置管道不像AngularJS一样支持filter管道。您需要创建一个custom pipe进行过滤才能做到：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'yourTeacherFilter'})
export class ExponentialStrengthPipe implements PipeTransform {
    // The pipe's transform method take first Argurment is the data using that pipe( which is data before the '|' mark in the template), the others parameter is optional
  transform(input: Array<AcademicPersonnelInfoModel>, lastname, id): number {
    // Your logic of returned values go here
    return input.filter( x => x.id === id && x.lastName.includes(lastname));
  }
}

上面的代码将创建一个 pipe ，它以数组作为主要输入以及两个附加参数lastname和id。管道执行您在内部编写的逻辑，并将返回transform()函数内部返回的内容。

在您的app.module @NgModule（）声明数组中声明新创建的 pipe ，然后可以将该管道应用于模板：

*ngFor= "let account of $data | yourTeacherFilter: search.lastName : search.id"

// The input following `yourTeacherFilter` should match the order
// of parameters you defined inside your custom pipe's transfomrm() function

这只是用于过滤数据的简单示例管道，您将需要进一步的逻辑来增强应用程序中的管道。

如何使用组合框和搜索按钮过滤阵列

1 个答案: