ERROR <ion-select> IONIC

Ionic Framework ionic-v3
1

Runtime Error
Error in ./ConfigPage class ConfigPage - caused by: Cannot create property ‘buttons’ on string ‘action-sheet’

<ion-item>
	<ion-label>Toppings</ion-label>
	<ion-select interface="popover" selectOptions="action-sheet">
		<ion-option>Bacon</ion-option>
		<ion-option>Black Olives</ion-option>
		<ion-option>Extra Cheese</ion-option>
		<ion-option>Mushrooms</ion-option>
		<ion-option>Pepperoni</ion-option>
		<ion-option>Sausage</ion-option>
	</ion-select>
</ion-item>
2

Anyone can help me please ?

3

Not having [ ] around the selectOptions attribute means it’s parsing it like a string, but it should really be interpolating your input, so you need [ ]

<ion-select interface="popover" [selectOptions]="options">

and in your component, options should be a member variable:

this.options = {
  title: 'Pizza Toppings',
  subTitle: 'Select your toppings',
  mode: 'md'
};

See under the heading Select Options for more info:

1 Like
4

thanks but here, i have 2 buttons. I need auto select… popover is not autoselect ?

<ion-item>
	<ion-label>Busca</ion-label>
	<ion-select interface="popover" [selectOptions]="selectOptions">
		<ion-option>Descrição</ion-option>
		<ion-option>Código</ion-option>
		<ion-option>Referência</ion-option>
	</ion-select>
</ion-item>
5

ionOption docs: https://ionicframework.com/docs/api/components/option/Option/

Set the attribute selected="true" on one of your <ion-option> elements like this:
<ion-option selected="true"></ion-option>

6

No, i need remove the button ok and cancel…

7

It should be popping up like a popover with no buttons… try:

<ion-select [interface]="'popover'" [selectOptions]="selectOptions">

8

nothing…i try this…

9

anyone ? i need help

10

I have the same problem:

	<ion-select  interface="popover" [(ngModel)]="selectedPeriodId" (ionChange)="onPeriodChange()">
		<ion-option *ngFor="let period of periods" [value]="period.id">{{period.name}}</ion-option>
	</ion-select>
11

maybe try value="period.id" instead of [value]="period.id"
is working in my code

12

also, maybe try giving your ion-select name="selectedPeriodId". For no reason other than that’s how mine is set up and it’s working. Don’t know if it makes a difference programatically.
I also have my ion-select and ion-option wrapped in one ion-item. Maybe that’ll help

VENUE
  <ion-select name="venue" interface="action-sheet" [(nmModel)]="venue" (ngModelChange)="modChange($event)">
      <ion-option *ngFor="let venue of venues">
          {{venue}}
           </ion-option>
          </ion-select>
        </ion-item>```
13

Thanks for your suggestions jaydz, it still isn’t working…

14

upgrading to V3 solved it for me: