使用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

要将select设置为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.
}