Angular 如何在Ionic2的下拉列表中使用搜索栏

Angular 如何在Ionic2的下拉列表中使用搜索栏,angular,ionic2,Angular,Ionic2,我正在尝试制作一份登记表,其中有一个国家的下拉列表,这个国家的规模非常大。我想包括在下拉列表顶部的搜索选项,以提供方便的访问。有人能帮我解决这个问题吗?这是我的密码: home.html <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> &

我正在尝试制作一份登记表,其中有一个国家的下拉列表,这个国家的规模非常大。我想包括在下拉列表顶部的搜索选项,以提供方便的访问。有人能帮我解决这个问题吗?这是我的密码:

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>

<form [formGroup]="myForm">   
    <ion-item>
        <ion-label>Dropdown1 :</ion-label>
        <ion-select formControlName="dd" (ionChange)='f($event)'  #dd>
            <ion-searchbar></ion-searchbar>
            <ion-option value='1'>A</ion-option>
            <ion-option value='2'>B</ion-option>
            <ion-option value='3'>C</ion-option>
            <ion-option value='4'>D</ion-option>
        </ion-select>
    </ion-item>



</form> 
</ion-content>

这个问题很笼统。我建议你在完成任务后问一些你无法处理的问题

不管怎么说,这里有一个和你想做的完全相同的例子

UPD:


考虑到您的评论和问题更新,最好的解决方案是使用搜索栏和带有复选框的项目列表创建自定义组件。您可以将其设置为下拉列表,或在离子模态组件中显示。您可以使其与ngModel一起工作,也可以只返回选定的值

这个问题很笼统。我建议你在完成任务后问一些你无法处理的问题

不管怎么说,这里有一个和你想做的完全相同的例子

UPD:


考虑到您的评论和问题更新,最好的解决方案是使用搜索栏和带有复选框的项目列表创建自定义组件。您可以将其设置为下拉列表,或在离子模态组件中显示。您可以使其与ngModel一起工作,也可以只返回选定的值

我建议用不同的方法来解决这个问题。您可以使用名为TYPEAHEAD的非常酷的
ng2引导功能,而不是使用下拉列表选择国家/地区。它是如何工作的?你们有一个简单的输入字段,你们所需要做的只是开始键入你们的国家的名称,甚至一个字符就足够了,列表就会弹出,或者你们可以让列表在点击时弹出,然后在用户键入内容时过滤结果。我建议还添加一个
占位符
,以便用户更好地了解它的工作原理,可能是“开始键入,您的国家将弹出”,或者类似的内容。您可以检查它是如何工作的,并且可以找到安装ng2引导程序的说明。我建议使用不同的方法来解决这个问题。您可以使用名为TYPEAHEAD的非常酷的
ng2引导功能,而不是使用下拉列表选择国家/地区。它是如何工作的?你们有一个简单的输入字段,你们所需要做的只是开始键入你们的国家的名称,甚至一个字符就足够了,列表就会弹出,或者你们可以让列表在点击时弹出,然后在用户键入内容时过滤结果。我建议还添加一个
占位符
,以便用户更好地了解它的工作原理,可能是“开始键入,您的国家将弹出”,或者类似的内容。你可以检查它是如何工作的,你可以找到安装ng2引导程序的说明

我已经试过了,但是我什么也做不到,这就是为什么我没有发布代码的原因。我已经提到了这个链接。它用于在列表中搜索,但我指定的是下拉列表。好的,那么您希望在哪里设置搜索栏?内部
离子选择
?我认为改变离子成分不是个好主意。。至少是这样。我已经试过了,但是我什么也做不到,这就是为什么我没有发布代码的原因。我已经提到了这个链接。它用于在列表中搜索,但我指定的是下拉列表。好的,那么您希望在哪里设置搜索栏?内部
离子选择
?我认为改变离子成分不是个好主意。。至少这样。谢谢Stefan的帮助谢谢Stefan的帮助嗨,你找到解决方法了吗?嗨,你找到解决方法了吗?
import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  function f(event){
  alert(event);

  }

}