Ionic4 ion-radio-group デフォルトでチェックをつける方法

はじめに

ion-radio-groupを使えば、どれか１つだけにチェックをつけさせれるので便利です。

しかし、[(ngModel)]でデータバインディングをさせようとすると、デフォルトでチェックをつけられなくなります。。。

今回はデータバインディングを実現させつつ、デフォルトでチェックをつけたいと思います！（厳密には見かけ上、データバインディングを実現させている感じです）

この記事の例はYes or Noの二択しかない場合に有効かと

[(ngModel)]でデータバインディングをさせようとすると、デフォルトでチェックをつけられなくなる

まずはOKなパターン

home.page.html

  <ion-list>
            <ion-radio-group>
              <ion-item>
                <ion-label>アイテム１</ion-label>
                <ion-radio [checked]="true" value="true"></ion-radio>
              </ion-item>
              <ion-item>
                <ion-label>アイテム２</ion-label>
                <ion-radio value="false"></ion-radio>
              </ion-item>
            </ion-radio-group>
          </ion-list>

無理なパターン

home.page.html

<ion-list>
            <ion-radio-group [(ngModel)]="dayEvent.items" name="items">
              <ion-item>
                <ion-label>アイテム１</ion-label>
                <ion-radio [checked]="true" value="true"></ion-radio>
              </ion-item>
              <ion-item>
                <ion-label>アイテム２</ion-label>
                <ion-radio value="false"></ion-radio>
              </ion-item>
            </ion-radio-group>
          </ion-list>

（かなり省略した.tsファイルですが、、、）

home.page.ts

item = true;
item2 = false;

dayEvent: DayEvent = {
    items: this.item,
    items2: this.item2
  };

これだとデフォルトでチェックがつかないのです。。

おそらくですが、原因はion-radio-groupに対して[(ngModel)]を使っているから。
こちらを参考に。。。

ngModelを使わずにデータバインディング（っぽいこと）

まずはhtml

home.page.html

<ion-list>
            <ion-radio-group [(ngModel)]="dayEvent.items" name="items" (ionSelect)="onChangeHandler($event)">
              <ion-item>
                <ion-label>アイテム１</ion-label>
                <ion-radio [checked]="dayEvent.items === true" value="true"></ion-radio>
              </ion-item>
              <ion-item>
                <ion-label>アイテム２</ion-label>
                <ion-radio [checked]="dayEvent.items === false" value="false"></ion-radio>
              </ion-item>
            </ion-radio-group>
          </ion-list>

次にtsファイル

home.page.ts

item = true;
item2 = false;

dayEvent: DayEvent = {
    items: this.item,
    items2: this.item2
  };

onChangeHandler(event) {
    if (event.target.value === 'true') {
      this.dayEvent.items = true;
      console.log(this.dayEvent.items);
    } else if (event.target.value === 'false') {
      this.dayEvent.items = false;
      console.log(this.dayEvent.items);
    }
  }

これでデフォルトでチェックをつけつつ、ngModelでバインドされてるかのようになりました。