Build the <ion list> radio group with ngFor

Question

I am trying to create 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 select only one, but the local variables seem to be broken (the first should be checked, but this also does not work). 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? Does anyone have an idea? Thank.

Answer 1

You need to use double brackets {{}}around checked="i==0"and value="game.id". For instance:

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

Otherwise attributes checkedand valueappreciate the contents as a string, not an expression.