Ionic - Как показать пользовательские кнопки, определенные в [selectOptions] на ion-select? - PullRequest
Новая
       7

Ionic - Как показать пользовательские кнопки, определенные в [selectOptions] на ion-select?

0 голосов
/ 25 ноября 2018

Я пытаюсь определить пользовательские кнопки для ионного выбора, передавая параметры в [selectOptions] следующим образом:

HTML: 

<ion-select [(ngModel)]="selectedSkypeUser" [selectOptions]="getSelectOptions()">
    <ion-option *ngFor="let user of skypeUsers" [value]="user.name"> 
        {{user.name}}
    </ion-option>
</ion-select>

TS: 

private skypeUserButtons = {
    title: "Skype users",
    subTitle: "Select the user you want to change",
    buttons: [
        {
            text: 'Cancel',
            role: 'cancel',
            handler: () => {}
        },
        {
            text: 'Delete',
            handler: () => {
                this.deleteSkypeUser();
            }
        },
        {
            text: 'Add new user',
            handler: () => {
                this.addSkypeUser();
            }
        }
    ]
};

getSelectOptions() {
    return this.skypeUserButtons;
}

Заголовок и подзаголовок отображаются нормально, но кнопки являются просто кнопками по умолчанию.Что я делаю неправильно?И как я могу это исправить?

Спасибо!

1 Ответ

0 голосов
/ 26 ноября 2018

Это не полный ответ на вопрос, а обходной путь, который действительно работает.(Возможно, единственное решение на данный момент).

Я только что создал простую кнопку, которая вызывает всплывающее окно, но это может быть элемент, стилизованный под обычный выбор, и отображающий выбранную опцию иливсе, что вы хотите:

HTML: 

<button ion-button icon-left round (click)="showUserDialog()">
    Edit users
</button>

TS: 

showUserDialog() {
  let inputs = [];
  let users = this.skypeUsers;
  users.forEach(user => {
      inputs.push({
          type: 'radio',
          label: user.name,
          value: user.name
      });
  });

  let alert = this.alertCtrl.create({
    title: "Select user",
    inputs,
    buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
            'Delete',
            handler: data => {
                // data == selected user.name (value)
            }
        }
    },
    {
        text: 'Add new user',
        handler: () => {
            // Trigger logic to add new user
            this.createNewUser()

            // Return true to close the alert - false to keep it open
            return true;
        }
    }]
  });

  alert.present();
}
...