Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic2 - Failed to execute 'setAttribute' on 'Element': '[[ngModel]]' is not a valid attribute name

I'm trying to dynamically load a list of options into a select input. The error I get is the following:

Error in ./PhonePage class PhonePage - caused by: Failed to execute 'setAttribute' on 'Element': '[[ngModel]]' is not a valid attribute name.

Here is my phone.ts code

@Component({
selector: 'page-phone',
templateUrl: 'phone.html'
})

export class PhonePage {

selectedValue: number;
optionList: Array<{value:number, text: string}> = [];

constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.navCtrl = navCtrl
    this.initOptionList();

}

moveToEmail(){

    this.navCtrl.push(EmailPage)
}

initOptionList(){
    this.optionList.push({value: 1,text:"FR +33"});
    this.optionList.push({value: 1,text:"BE +32"});
    this.optionList.push({value: 1,text:"LU +352"});
    this.optionList.push({value: 1,text:"CH +41"});
    this.optionList.push({value: 1,text:"GB +44"});
    this.optionList.push({value: 1,text:"IE +353"});
    this.optionList.push({value: 1,text:"NL +31"});
    this.optionList.push({value: 1,text:"ES +34"});
    this.optionList.push({value: 1,text:"PT +351"});
    this.optionList.push({value: 1,text:"IT +39"});
    this.optionList.push({value: 1,text:"DE +49"});
    this.optionList.push({value: 1,text:"DK +45"});
    this.optionList.push({value: 1,text:"MT +356"});
    this.optionList.push({value: 1,text:"GP +590"});
    this.optionList.push({value: 1,text:"GF +594"});
    this.optionList.push({value: 1,text:"MQ +596"});
    this.optionList.push({value: 1,text:"YT +262"});
    this.optionList.push({value: 1,text:"NC +687"});
    this.optionList.push({value: 1,text:"PF +689"});
    this.optionList.push({value: 1,text:"RE +262"});
    }
}

Here is the code for my html page where I'm trying to loop. I push the options in an array.

<ion-select [[ngModel]]="selectedValue">
    <ion-option *ngFor="let item of optionList" value="{{item.value}}">{{item.text}}</ion-option>
</ion-select>
like image 977
Isabelle Avatar asked Feb 16 '17 14:02

Isabelle


1 Answers

You have to declare ngModel as [(ngModel)]="selectedValue" (parenthesis inside brackets) while you have declared as [[ngModel]]="selectedValue" (brackets inside brackets).

like image 185
Prerak Tiwari Avatar answered Nov 25 '22 20:11

Prerak Tiwari