<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<select name="location" class="form-control" class="selectLocation" [(ngModel)]="nameSelectedVal" (ngModelChange)="onChange($event)">
<option *ngFor="let location of locations" [ngValue]="location.code" [disabled]="location.code==0">
{{location.city}}
</option>
</select>
<p class="selectArrow"><button [disabled]="disableFlag" routerLink="/my-bookride" class="leftArrow">
<span class="glyphicon glyphicon-arrow-right"></span></button></p>
</div>
</form>
这是形式,我使用选择我需要显示选择一个城市作为默认选项的选项时窗体加载
export class locationComponent
{
butDisabled: boolean = true;
disableFlag:boolean = true;;
private locations: any;
constructor() {
this.locations = [
{
"code": 0,
"city": "Select one city"
},
{
"code": 1,
"city": "Hyderabad"
},
{
"code": 2,
"city": "Banglore"
}
];
this.nameSelectedVal = this.locations[0];
}
onChange($event) {
if($event!=="0"){
this.disableFlag=false;
} else{
this.disableFlag=true;
}
}
}
这是我给的选项将显示在HTML查看我一直在使用[ngValue]设置选择一个城市作为默认值尝试
用,因为它是你的HTML:
<option *ngFor="let location of locations" [ngValue]="location.code" [disabled]="location.code==0">
{{location.city}}
</option>
</select>
和TS文件分配内:this.nameSelectedVal = this.locations [0]为.code;
它会工作。