Question

我确实在FORMGROUP的下拉列表中有使用ngFor的数据列表，并且我会将数据发布到服务器，所以如何在值中添加搜索过滤器？

我试图将搜索过滤器放在表单组中，但是它的工作原理还是不对。

    <div class="gym-selector">
        <h3 class="branchtitle">Select Your Gym & Branch</h3>

        <form [formGroup]="GymFG" (ngSubmit)="sendGymDetails()">

            <select formControlName="gym_id" class="form-control" (change)="getBranchIDs($event.target.value)" id="gym_id">
            <option value="">Choose your Gym...</option>
            <!-- <ion-input #myInput placeholder="Item name..."  (input)="filterItem(myInput.value)"></ion-input> -->
            <option *ngFor="let gym of gymDetailRes" value="{{gym.gym_id}}">{{gym.gym_name}}</option>
        </select>
            <select formControlName="branch_id" class="form-control" id="branch_id">
            <option value="">Choose your Branch....</option>
            <option *ngFor="let branch of branchDetailRes" value="{{branch.branchID}}">{{branch.name}}</option> 
        </select>

            <input type="submit" value="Proceed" class="enter-button">
        </form>

    </div>

gym：[{“ gym_id”：0，“ gym_name”：“ coovum”，“ email”：“ coovum@coovum.com”，“ mobile”：null，“ pass”：“ Coovum！@＃$” ，“ created_time”：“ 2019-04-10T14：34：13.377Z”，“ expire_on”：“ 2030-03-27T16：06：09.680Z”，“ demo”：“ false”，“ logo”：null，“ dob“：null，” blood_group“：null，” gender“：null，” address“：null，” city“：null，” zipcode“：null，” name“：null，” color“：null，” gst_no“ ：null，“网站”：null，“ gym_alias”：null}]

Answer 1

使用离子可选包装：ionic-selectable

安装软件包

// Ionic 3
npm install ionic-selectable@3.4.0 --save

更多详细信息，请点击上面的链接

工作演示：link

Answer 2

您可以在没有任何外部依赖性的情况下实现所有这些目标，例如离子选择的废话。

在您的component.html上，我们将keyup事件绑定到您的input元素。请注意我们要绑定到的方法的名称。

<input (keyup)="filterList($event)">

首先，在您的component.html上，我们创建gymDetailRes的浅表副本。我们创建它的浅表副本的原因是为了确保我们有2个列表。一个（gymDetailRes）用于在视图上显示，另一个（temp）用作具有“完整”数据的副本，该数据将用于后续搜索和过滤目的。在这里，我们使用spread syntax为每个对象创建浅表副本。

temp: any[];

ngOnInit() {
  this.temp = this.gymDetailRes.map(gym => ({...gym}))
}

然后，我们可以根据输入框中键入的值使用Array.filter（）相应地过滤数据。如您所见，temp从未突变。 gymDetailRes将在视图中显示要显示的健身房列表。

filterList(event) {
 const searchTerm = event.target.value.toLowerCase();   
 const temp = this.temp.filter(gym => {
   if (gym['gym_name'].toLowerCase().indexOf(searchTerm) !== -1) {
     return true;
   }
 });
 this.gymDetailRes = temp;
}

如何在* ngFor下拉列表中添加搜索过滤器？

2 个答案: