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

【问题标题】：How to i filter my array with a combobox and search button如何使用组合框和搜索按钮过滤我的数组
【发布时间】：2019-07-12 07:57:13
【问题描述】：

我有一个为教师提供信息的数组。我有一个列出这些教师的列表组件。我想要一个组合框并过滤这个数组。

这是我的数组

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>

我应该在 typescript 中做什么才能过滤这个列表？

这是我的 ts 文件

export class AcademicPersonnelListComponent implements OnInit {

/** */


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

我有一个为教师提供信息的数组。我有一个列出这些教师的列表组件。我想要一个组合框并过滤这个数组。

【问题讨论】：

这是 AngularJS 吗？根据 ng-repeat ng-model
没有。带有打字稿的 Angular cli
运行“ng serve”后会收到什么错误？
在 angular 2+ 中不支持 filter 管道，如 angularJS

标签： javascript html angular typescript

【解决方案1】：

Angular 2+ 内置管道不支持 filter 管道，如 AngularJS。您需要创建一个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() 函数中返回的任何内容。

将新创建的 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

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

【讨论】：