ionic3 ion-select 在不点击的情况下弹出

1.html页面(用户手动点击时触发组件)

 <ion-item>
    <ion-label>标题</ion-label>
    <ion-select [(ngModel)]="nowWork" cancelText="取消"  okText="确定">
      <ion-option *ngFor="let value of data" value="value.value" selected="true">{{value.title}}</ion-option>
    </ion-select>
  </ion-item>

2.自动触发该弹框效果
可以用AlertController来展现先效果(如果html中的select的selectOptions修改为action-sheet,这相应需修改为ActionSheetController ,这里用AlertController举例)
在需要自动触发的地方调用该方法,应为select中值是双向绑定的,所有在这修改,html中也会有相应的变化


  toSelect() {
    let alert = this.alertCtrl.create();
    alert.setTitle(this.transateContent['TestNetwork']);
    alert.addInput({
      type: 'radio',
      label: this.transateContent['Telecom'],
      value: 'Telecom'
    });
    alert.addInput({
      type: 'radio',
      label: this.transateContent['Move'],
      value: 'Move'
    });
    alert.addInput({
      type: 'radio',
      label: this.transateContent['Unicom'],
      value: 'Unicom'
    });
    alert.addButton(this.transateContent['Cancle']);
    alert.addButton({
      text: this.transateContent['OK'],
      handler: (data: any) => {
        console.log('Radio data:', data);
        this.nowWork = data;
      }
    });
    alert.present();
  }

猜你喜欢

转载自blog.csdn.net/u013591091/article/details/80776809