Ion-selectのバインディング→tsファイルの内容をhtmlに表示する

Question

前提・実現したいこと

Ion-selectで選択した項目をtsファイルにバインディングする。
tsファイルに登録された内容をhtmlファイルに表示する。

該当のソースコード

<!--shinki.page.html-->

<!--<ion-select>の選択項目-->

<ion-content>
  <form (submit)="register()">
　　<ion-item>
    　　<ion-label>カテゴリ</ion-label>
    　　<ion-select okText="完了" cancelText="キャンセル" [(ngModel)]="category">
      　　<ion-select-option value="'main'">メイン</ion-select-option> 
      　　<ion-select-option value="'sub'">サブ</ion-select-option>
      　　<ion-select-option value="'dring'">飲み物</ion-select-option>
      　　<ion-select-option value="'dessert'">デザート</ion-select-option>
    　　</ion-select>
  　</ion-item>
   <ion-button expand="block" type="submit">登録</ion-button>
  </form>

 <!--登録されたselectの内容を表示したい-->
    <ion-list>
      <ion-item *ngFor="let o of obj">
       {{o.category}}
      </ion-item>
    </ion-list>

//shinki.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-shinki',
  templateUrl: './shinki.page.html',
  styleUrls: ['./shinki.page.scss'],
})
export class ShinkiPage implements OnInit {

category:"main" | "sub" | "drink" | "dessert"

obj : {
   category: "main" | "sub" | "drink" | "dessert"
  }[] = [];

//htmlの登録ボタンが押されたらobjに格納したい
  register(){
   this.obj.push({
     category: this.category
   }) 

}

試したこと

超がつくほどの初心者です。また初投稿です。情報不足等ございましたら仰ってくださいませ。
初歩的な質問であること、承知しております。申し訳ございません。

<ion-select>で項目を選択したものをオブジェクトに格納し、htmlでその表示を返したいと考えています。

私個人としましては<ion-select>内の[(ngModel)]やvalueの使い方がよくないのだと感じておりますが、解決方法がわかりません。他にも文法的にめちゃくちゃになっている部分もあろうかと思います。
どなたかご教示いただけますと幸いです。
何卒宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

Ionic version 5.4.16

Answer 1

開発ツールをみてみると、 name を設定しろとでてませんでしょうか。 ion-select に name 属性を設定する必要があります。

例：

<ion-select okText="完了" cancelText="キャンセル" [(ngModel)]="category" name="category">

また、メソッド regisiter の実行時に this.category の値をみればいいのですが、「'main'」という状態で取得できると思います。

value="main"
[value]="'main'"

のどちらかにしないといけないかなと思います。まずは開発ツールでエラーを確認する、次に期待する動作にならなかった時はconsole.logで値を表示することを徹底してみてくださいー。

Comments

[Patrick.Walker]

この度はご回答いただきありがとうございます。
ご指摘の通りに書き直したところ、イメージ通りの動作が確認できました。
本当にありがとうございます。
エラーメッセージにも読み慣れていけるように取り組んでみます。

また貴書「Ionicで作るモバイルアプリ入門」でも勉強させていただいています！
今後ともよろしくお願いいたします。