используя ngModel, отключив выбор по умолчанию html

Question

В моем приложении Angular 8 я использую html option. Но я не могу установить опцию по умолчанию. Если я использую ngModel, то выбор по умолчанию не работает. После удаления ngModel выбор по умолчанию работает.

<div>
   <h4>Sort By</h4>
   <select [(ngModel)]="sort_on_approv">
   <option value="id" [selected]="true" >ID</option>
   <option value="amount">Amount</option>
   <option value="payment_method">Payment Method</option>
   <option value="mobile_number">Mobile Number</option>
   <option value="date">Date</option>
   <option value="status">Status</option>
   </select>
</div>

Я также пытался с [selected]="true".

Answer 1

Чтобы установить для выбора значение default, необходимо установить для ngModel sort_on_approv значение, которое вы хотите использовать по умолчанию.

.ts код: this.sort_on_approv = 'id';

Answer 2

Измените свой код, как показано ниже,

. html

<div>
   <h4>Sort By</h4>
   <select [(ngModel)]="sort_on_approv">
   <option value="id" >ID</option>
   <option value="amount">Amount</option>
   <option value="payment_method">Payment Method</option>
   <option value="mobile_number">Mobile Number</option>
   <option value="date">Date</option>
   <option value="status">Status</option>
   </select>
</div>

.ts

sort_on_approv: string

ngOnInit() {
   this.sort_on_approv = 'id'; // The default value you want to select.
}