在Angular 5的select标签中选择默认选择的值

Question

here is my code

<select class="form-control input-transparent" id="select-field" name="address" ngModel required>
     <optgroup *ngFor="let wallet of wallets" label="{{wallet.label}}">
         <option value="{{ wallet.address }}" [selected]="wallet.address == wallets[0].address">{{ wallet.address }}</option>
     </optgroup>
</select>

I want to select first option as selected but still on default value was selected

Answer 1

selected is not supported with ngModel

You can use this sample code. I have created a demo on stackblitz . I hope this will help/guide to you/others.

HTML Code

<select class="form-control input-transparent" id="select-field" name="address" required [(ngModel)]="address">
    <optgroup *ngFor="let wallet of wallets;" label="{{wallet.label}}">
        <option [value]="wallet.id">{{ wallet.address }}</option>
    </optgroup>
</select>

.ts Code

    address:number=1;
    wallets= [{
        id: 1,
        address: 'address1',
        label: 'Label 1'
    }, {
        id: 2,
        address: 'address 2',
        label: 'Label 2'
   }]

Answer 2

Use the <selected> tags property value and set it to your desired value.

<select value="wallets[0].address">

You can set a pre-selected option in a drop-down list by using the value attribute for the tag, ie , but it's not valid in the W3C validator. – Apostle May 20 '15 at 15:40 How can I set the default value for an HTML <select> element?