CODEWITHSUNDEEP
ionic2
Francesco
Francesco

Reputation: 103

Build an <ion-list radio-group> with ngFor

I'm trying to build an ion-list radio-group with *ngFor from an array. I have an array of games (id, name) and I want only a list with them where the user can choose only one, but local variables seems to be broken (the first should be checked but this does not work too). Here is my code:

<ion-header>
 <ion-navbar>
    <ion-title>
        New match
    </ion-title>
 </ion-navbar>
</ion-header>

<ion-content>
 <ion-list radio-group>
    <ion-list-header>
        Game
    </ion-list-header>
    <ion-item *ngFor="let game of games, let i = index">
        <ion-label>{{ game.name }}</ion-label>
        <ion-radio checked="i == 0" value="game.id"></ion-radio>
    </ion-item>
 </ion-list>
</ion-content>

What am I doing wrong? Anybody have an idea? Thanks.

Upvotes: 5

Views: 3840

Answers (1)

John
John

Reputation: 11399

You have to use double brackets {{}} around the checked="i==0" and the value="game.id" Like so:

<ion-radio checked="{{i == 0}}" value="{{game.id}}"></ion-radio>

Otherwise, the checked and value attributes evaluate the content as a strings, not expressions.

Upvotes: 4

Related Questions