如何使用组合框和搜索按钮过滤我的数组

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管道。您需要创建自定义管道以进行筛选才能执行此操作：

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()函数中返回的任何内容。

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

*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

这只是用于筛选数据的简单示例管道，你将需要进一步的逻辑来增强应用中的管道。