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

Question

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.

Answer 1

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.