Angular HTML文件中的下拉列表过滤器

Question

<div class="panel-body rc-bl rc-br">         
<form ngForm class="form-group">
<div style="position: relative; overflow: hidden; width: 100%; margin: 0px 0px 0px 0px;">
<!-- Col 1 start -->
<div style="display: inline-block; width: 130px; margin: 0px 0px 0px 0px; vertical-align: middle;" class="labelRed12">
<label for="wslr_name">Wholesaler:</label>
</div>
<!-- Col 2 start --> 
<div style="display: inline-block; margin: 0px 0px 0px 0px; vertical-align: middle">
<select style="width: 250px;" id="wslr_name" name="wslr_name"  [(ngModel)]="Group.wslr_name" (change)=wslrSelect(Group.wslr_name)>
    <option *ngFor="let c of wslrList.result">{{c.A}}</option>
</select>
</div>

这是Angular中的HTML文件。我需要基于筛选的下拉列表。如果我给出"；A"；在搜索框中，我应该得到以"开头的所有数据；A"；只有

Answer 1

有一个名为ng2搜索过滤器的NPM-PACKAGE，这肯定会对您有所帮助。

1. 您应该安装程序包->npm i ng2搜索筛选器--保存
2. 在app.module.ts中导入模块

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';

import { Ng2SearchPipeModule } from 'ng2-search-filter'; // <-- HERE

@NgModule({
imports: [BrowserModule, Ng2SearchPipeModule], // <-- HERE
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

然后你应该创建一个搜索字段：

<input type="text" [(ngModel)]="searchText">

在component.ts文件中，将searchText变量声明为public。

<option *ngFor="let c of wslrList.result | filter: searchText">{{c.A}}</option>

在搜索字段中键入内容时，您应该看到下拉列表被键入的字母/数字(任何键入的内容(过滤。