Q&A
ご回答ありがとうございます！
ソースコードを少し詳しく修正いたしました。
この場合だと、コンストラクタに記述するのでしょうか？
前提・実現したいこと
Angular初心者です。
現在、プルダウンで選択できる画面を作成しようとしています。
selectで選択肢を表示させることはできたのですが、デフォルト値をselectedで指定しても、表示されずデフォルト値は何もない状態となってしまいます。
下記ソースでいうと、プルダウンのデフォルト値にはtype01が表示されてほしいのですが、実行してみるとデフォルト値は何もない状態となっており、プルダウンを開くとtype01, type02, type03が表示されています。
解決方法をご教授いただけますと幸いです。
該当のソースコード
template.html
html
1<select[(ngModel)]="selectedType"> 2 <option*ngFor="let type of types" [selected]="type.id=='0'"[value]="type.id"> 3 {{type.name}} 4 </option> 5</select>
AppComponent.ts
typescript
1private types: Object; 2 3export class AppComponent implements OnInit { 4 5 const SEARCH_TYPE=[ 6 { 7 name:'type01', 8 id:0 9 }, 10 { 11 name:'type02', 12 id:1 13 }, 14 { 15 name:'type03', 16 id:2 17 } 18 ]; 19 20 constructor() { 21 types = getTypes(); 22 } 23 24 getTypes() { 25 return SEARCH_TYPE; 26 } 27 28}
試したこと
書き方が悪いのかと思い、下記方法でも試しましたが、こちら選択肢（type01...）自体表示されませんでした。
html
1<select ng-model="selectedType" ng-options="type.name for type in types"></select>
補足情報（FW/ツールのバージョンなど）
Angular: 5.1.2
ご教授お願いいたします。
回答2件
0
ベストアンサー
回答若干変わるようで申し訳ありませんが、select要素を使用する場合は以下。
参考URL：https://qiita.com/seteen/items/66175e64e51f510108cf
//app.component.ts
上記URLに書いてある通り、[value]="undefined"をoption に記述するとできるようです。下記のコードは検証ようの参考です。
Sampleコード
import { Component} from '@angular/core'; import { Member } from './member'; //別途member.tsに型注釈定義 const SEARCH_TYPE: Member[] =[ { name:'type01', id:0 }, { name:'type02', id:1 }, { name:'type03', id:2 } ]; @Component({ selector: 'my-app', template: ` <h1>Selet定義{{name}}</h1> <select [(ngModel)]="type"> <option *ngFor="let type of types" [value]="undefined"> {{type.name}} </option> </select>` , }) export class AppComponent { types = SEARCH_TYPE; }
//index.html
<body> <my-app>ここにapp.component内のtemplate表示</my-app> </body>
投稿2018/08/21 01:54
総合スコア25
0
私もAngular学習中の身で似たような状況があったので情報提供したいと思います。
（違った内容ならすいません。）
ngModelによってフォーム要素とコンポーネントを紐つけた場合、フォーム要素側で設定したデフォルト値は無視されるとようです。(フォーム要素の値とプロパティの値が同期しているため)
つまりデフォルト値は
export class AppComponent{selectedType = 'constSEARCH_TYPE.name[0]'; }
の中に初期値を記述したらどうでしょう？
上記具体的コードがわからないので検証してないですが
参考書：Angularアプリケーションプログラム
投稿2018/08/20 12:22
総合スコア25
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/21 02:11 編集