Question

我使用的是ionic 4，我想通过interfaceOptions在ion-select上设置自定义按钮

HTML

     Fragment fragment = new Admin();
 FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
                   fragmentTransaction.setCustomAnimations(R.anim.slide_in_down, R.anim.slide_in_down);

        fragmentTransaction.replace(R.id.frame, fragment);
                 listView.getBackground().setAlpha(200);//this is error
                fragmentTransaction.commit();
               }


      java.lang.NullPointerException: Attempt to invoke virtual method 'void android.graphics.drawable.Drawable.setAlpha(int)' on a null object reference
     atcom.developers.studentsplacementsystem.MainActivity$1.onItemClick(MainActivity.java:48)
            at android.widget.AdapterView.performItemClick(AdapterView.java:350)
            at android.widget.AbsListView.performItemClick(AbsListView.java:1683)
            at android.widget.AbsListView$PerformClick.run(AbsListView.java:4094)

TS

<ion-item>
  <ion-label>Lines</ion-label>
  <ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOptions">
    <ion-select-option [value]="line" *ngFor="let line of Lines">{{linea.Name}}</ion-select-option>
  </ion-select>
</ion-item>

};

但是，仅显示默认按钮（确定和取消）

医生说应该有可能

https://ionicframework.com/docs/api/select

我可以看到以前的Ionic版本已经报道了这一点

https://forum.ionicframework.com/t/custom-button-for-ion-select-through-selectoptions-not-working/157305

是否可以在Ionic 4上进行这项工作？有解决方法吗？

编辑：我尝试使用PopOver界面获得相同的结果

Answer 1

据我所见，您尝试做的事情是不可能的。

文档实际上只说您可以设置按钮文本：

ion-select#select-buttons - Ionic Documentation

默认情况下，警报具有两个按钮：Cancel和OK。可以使用cancelText和okText属性来自定义每个按钮的文本。

这并不是说按钮可以自定义。

您可以传入interfaceOptions，但稍后会被默认按钮集覆盖：

https://github.com/ionic-team/ionic/blob/master/core/src/components/select/select.tsx#L339

代码如下：

const alertOpts: AlertOptions = {
  mode,
  ...interfaceOptions,

  header: interfaceOptions.header ? interfaceOptions.header : labelText,
  inputs: this.createAlertInputs(this.childOpts, inputType),
  buttons: [
    {
      text: this.cancelText,
      role: 'cancel',
      handler: () => {
        this.ionCancel.emit();
      }
    },
    {
      text: this.okText,
      handler: (selectedValues: any) => {
        this.value = selectedValues;
      }
    }
  ],
  cssClass: ['select-alert', interfaceOptions.cssClass,
             (this.multiple ? 'multiple-select-alert' : 'single-select-alert')]
};
return alertController.create(alertOpts);

因此，您可以看到...interfaceOptions,一开始是传入的，然后将按钮设置为默认值，唯一的自定义选项是“确定”或“取消”文本。

Answer 2

我正在与ionic一起使用AlertController，我可以对其进行自定义，只需看看my screen 。

您只需要导入AlertController，然后可以执行以下示例：

home.page.ts

async addAlertHome(adresse: string, lat: string, lon: string) {
    const alert = await this.alertController.create({
      header: 'Ajouter aux favoris',
      message: 'Êtes vous sûr de vouloir ajouter cette adresse à vos favoris ?',
      buttons: [
        {
          text: 'Non',
          role: 'cancel',
          cssClass: 'secondary'
        }, {
          text: 'Oui',
          handler: () => {
            alert.dismiss().then(() => {
              this.addFavoriteHome(adresse, lat, lon);
            });
            console.log('Confirm Okay');

          }
        }
      ]
    });


    await alert.present();
  }

并在html上所需的地方使用它： home.page.html

<ion-icon name="heart-empty" (click)="addAlert(location.display_name, location.lat, location.lon)" end>
            </ion-icon>

不要忘记您的构造函数：

public alertController: AlertController

添加“全选”按钮进行离子选择

2 个答案: