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中，如果只想单击Sub matchfile2() Const marker As String = "_" Dim lrow As Long Dim rx, s As String, t As String, parts Set rx = CreateObject("vbscript.regexp") lrow = Cells(Rows.count, 6).End(xlUp).Row For A_row = 1 To lrow ' Last row t o consider s = Range("F" & A_row) ' Set s = ActiveSheet.UsedRange rx.Pattern = "(\w)+ (?=\w)" rx.Global = True ' find all, not only the first match t = rx.Replace(s, "$1_") Next A_row End Sub并隐藏button

，则显示列表

1。导入select

IonSelect

2。在内部类中，添加对import { Component, ViewChild } from '@angular/core'; import { Platform, Events, IonSelect } from '@ionic/angular';的引用，并将select设置为true以隐藏showList。还要添加select来检索选定的国家/地区。

setCountry()

3。在HTML中，添加具有隐藏属性的@ViewChild('countryList') selectRef: IonSelect; showList = true; setCountry() { console.log('New country'); }元素

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将显示要选择的国家/地区列表。

Answer 3

下面的代码有效。

在模板（HTML）中

<ion-button (click)="openSelectList()"></ion-button>
 <ion-select #countryList (ionChange)='setCountry($event)' hidden="true">
    <ion-select-option value="1">Egypt</ion-select-option>
    <ion-select-option value="2">Kuwait</ion-select-option>
</ion-select>

在.ts

中

@ViewChild('countryList') selectRef: IonSelect;
   ...

   openSelectionList() {
     setTimeout(()=>{
       this.selectRef.open();
     }, 2);
   }

   setCountry(event) { console.log('Selected country is ', event.detail.value) }

如何使用不同的按钮

3 个答案:

HTML

TS