デフォルト値は、選択リストのinit

Question

にモデル化するために結合されていないので、私は私のコンポーネントで、この配列があります。 vehicleTypes = ['Bicycle', 'Car', 'Motorcycle', 'Van'];

を私はしてドロップダウンHTMLを生成します。私が得るために管理するにはどうすればよい

<select id="vehicletype" class="form-control" [(ngModel)]="selectedVehicleType" > 
    <option *ngFor="let vt of vehicleTypes; let i = index" [selected]="i === 0">{{ vt }}</option> 
</select> 

ページがロードされたときにselectedVehicleTypeに格納された値？今すぐドロップダウンリストの最初の値を表示しますが、selectVehicleTypeはundefinedです。 selectVehicleTypeに格納される前に、別の値を最初に選択する必要があります。

私は手動でコンポーネントに割り当てることに注意していますが、HTMLに別の方法があるかどうかを知りたいと思います。ドロップダウンが必要なたびに、コンポーネントに余分なコード行を書きたくないです。

Answer 1

selected属性バインディングをオーバーライドしているため、モデルのデフォルト値を設定する方法はありません。また、option要素の値バインディングを使用することをお勧めします。

<select id="vehicletype" class="form-control" [(ngModel)]="selectedVehicleType" > 
    <option *ngFor="let vt of vehicleTypes; let i = index" [value]="vt">{{ vt }}</option> 
</select> 

そして、それはテンプレートでそれを考え設定するよりも、より多くのコードを追加していないので、あなたのコンポーネントにあなたが宣言を組み合わせることができ、1つのラインに設定：

selectedVehicleType: string = vehicleTypes[0];