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