[Angular] select-optionでvalueにnullをセットしたいとき

2019年10月11日 propg Angular, TypeScript, 0

Angularのテンプレートでselect-optionを定義するとき、”全て”や”未指定”を入れるときにvalueが空の値をセットしたい場合があります

<select  name="resultOption" [(ngModel)]="result1">
                  <option [value]="null">全て</option>
                  <option [value]="1">北海道</option>
                  <option [value]="2">青森県</option>

[value]=”null”とすると、全てを選択したとき、null値ではなく、”null”という文字列がresult1にbindされてしまう

【解決策】
[value]を[ngValue]に変えるとnull値がセットされる

<select name="resultOption" [(ngModel)]="result1">
                  <option [ngValue]="null">全て</option>
                  <option [value]="1">北海道</option>
                  <option [value]="2">青森県</option>

★valueは常に文字列で扱う

★ ngValueはobjectを含むそのものの型で扱う

 

== ランキングに参加しています。ぜひクリックお願いします ==

[Oracle] DB接続時、「ORA-28040: No matching authentication protocol」が表示されるときの対策 HTMLシステムでのIME制御