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

使用 ngModel，禁用 html 选项默认选择

using ngModel, disabling html option default selection

html

html-select

angular