如何使用不同的按钮弹出离子选择

Question

如何使用不同的按钮弹出离子选择？

<ion-select [(ngModel)]="choices" multiple="true">
        <ion-option>Appliances</ion-option>
        <ion-option>Automobile</ion-option>
        <ion-option>Cellphones</ion-option>
        <ion-option>Clothing</ion-option>
        <ion-option>Computers</ion-option>
        <ion-option>Electronics</ion-option>
        <ion-option>Toys</ion-option>
</ion-select>

Answer 1

你可以ViewChild用ionic-angular

HTML

<ion-select [(ngModel)]="choices" multiple="true" #mySelect>
     <ion-option>Appliances</ion-option>
     <ion-option>Automobile</ion-option>
     <ion-option>Cellphones</ion-option>
     <ion-option>Clothing</ion-option>
     <ion-option>Computers</ion-option>
     <ion-option>Electronics</ion-option>
     <ion-option>Toys</ion-option>
</ion-select>

<button ion-button (click)="openSelect()">Open</button>
<button ion-button (click)="closeSelect()">Close</button>

TS

import { Component, ViewChild } from '@angular/core';
import { NavController,Content, Select } from 'ionic-angular';
import { Events } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage 
{    
    @ViewChild('mySelect') selectRef: Select;
    constructor(public navCtrl: NavController,public events: Events) 
    {}

    openSelect()
    {
        this.selectRef.open();
    }

    closeSelect()
    {
        this.selectRef.close();
    }
}

Answer 2

感谢@PareshGami

但是在ionic 4中，如果您只想在button单击并隐藏时显示列表select

1.进口 IonSelect

import { Component, ViewChild } from '@angular/core';
import { Platform, Events, IonSelect } from '@ionic/angular';

2.Inside 类，添加引用select并设置showList为 true 以隐藏select。还添加setCountry()以检索选定的国家/地区。

@ViewChild('countryList') selectRef: IonSelect;
showList = true;

setCountry() {
    console.log('New country');
}

3.在HTML中，添加select带有隐藏属性的元素

<ion-select placeholder="Country" #countryList [hidden]='showList' (ionChange)='setCountry()'>
    <ion-select-option value="1">Egypt</ion-select-option>
    <ion-select-option value="2">Kuwait</ion-select-option>
    <ion-select-option value="3">UAE</ion-select-option>
    <ion-select-option value="4">Qatar</ion-select-option>
    <ion-select-option value="5">Bahrain</ion-select-option>
    <ion-select-option value="6">Saudi Arabia</ion-select-option>
</ion-select>

<ion-label (click)='displayCountry()'>Change</ion-label>

因此select元素是不可见的，单击Change将显示要选择的国家/地区列表。