使用数据绑定后，下拉列表中的字体(下拉列表的值)不可见

Question

使用数据绑定后，应该显示的值不可见。代码：

(click)="add({Particulars:Particulars.value}, regForm)"
<select   name="Particulars" class="btn btn-sm" #Particulars [(ngModel)]="regModel.Particulars" ngModel required>
<option value="Particulars" >Particulars</option>
<option value="IBM SPSS 1">IBM SPSS1</option>
<option value="IBM SPSS 2">IBM SPSS 2</option>
<option value="IIBM SPSS 3">IBM SPSS 3</option>
<option value="IBM SPSS 4">IBM SPSS 4</option>
</select>

component.ts文件：

regModel = new Reg('');

.ts文件：

export class Reg {
constructor(
public Particulars: string = 'Particulars' ,
) { }

}

在此处输入图像描述

Answer 1

您可以使用ng-selected，如下所示：

<select   name="Particulars" class="btn btn-sm" #Particulars [(ngModel)]="regModel.Particulars" ngModel required>
<option value="Particulars" ng-selected="'Particulars' == regModel.Particulars">Particulars</option>
<option value="IBM SPSS 1" ng-selected="'IBM SPSS 1' == regModel.Particulars">IBM SPSS1</option>
<option value="IBM SPSS 2" ng-selected="'IBM SPSS 2' == regModel.Particulars">IBM SPSS 2</option>
<option value="IIBM SPSS 3" ng-selected="'IIBM SPSS 3' == regModel.Particulars">IBM SPSS 3</option>
<option value="IBM SPSS 4" ng-selected="'IBM SPSS 4' == regModel.Particulars">IBM SPSS 4</option>
</select>