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

Question

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

我曾尝试将搜索过滤器放在表单组中，但它无法正常工作，或者可能是我错了。

    <div class="gym-selector">
        <h3 class="branchtitle">Select the datas</h3>

        <form [formGroup]="foodids" (ngSubmit)="senddata()">

            <select formControlName="gym_id" class="form-control" (change)="getbranch($event.target.value)" id="gym_id">
            <option value="">Choose your food...</option>
            <!-- <ion-input #myInput placeholder="Item name..."  (input)="filterItem(myInput.value)"></ion-input> -->
            <option *ngFor="let food of fooddetails" value="{{food.f_id}}">{{food.f_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,"website":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;
}