我想在下拉列表中设置默认值，但是它显示为空白，然后在选项列表中显示默认值。 如何在其中显示默认值？
我正在制作（学习）MEAN（Angular 6）应用程序。
这是我的ts file
export class EditBookingComponent implements OnInit {
public currentBooking: IBooking;
bookingid: any;
updateBookingForm: FormGroup;
cars: any;
drivers: any;
clients: any;
defaultClient: any;
defaultCar: any;
defaultClientValue: any;
constructor(private fb: FormBuilder,
private bookingService: BookingService,
private toastr: ToastrService,
private router: Router,
private carService: CarService,
private driverService: DriverService,
private clientService: ClientService,
private route: ActivatedRoute,
public dialogRef: MatDialogRef<EditBookingComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.bookingid = data.id;
this.updateBookingForm = this.fb.group ({
'clientname' : new FormControl(""),
'bookingdate' : new FormControl(""),
'fromcity' : new FormControl(""),
'tocity' : new FormControl(""),
'pickupdate' : new FormControl(""),
'returndate' : new FormControl(""),
'carname' : new FormControl(""),
'drivername' : new FormControl("")
});
}
ngOnInit() {
this.getOneBooking(this.bookingid);
this.getAllCars();
this.getAllDrivers();
this.getAllClients();
}
getAllCars(){
this.carService.getCars().subscribe((res) => {
this.cars = res;
}, err => {
console.log(err);
});
}
getAllDrivers(){
this.driverService.getDrivers().subscribe((res) => {
this.drivers = res;
}, err => {
console.log(err);
});
}
getAllClients(){
this.clientService.getClients().subscribe((res) => {
this.clients = res;
}, err => {
console.log(err);
});
}
getOneBooking(id){
this.bookingService.getBooking(id).subscribe((res) => {
this.currentBooking = res;
this.defaultCar = res.car;
this.populateForm(this.currentBooking);
}, err => {
console.log(err);
});
}
populateForm(data): void {
this.updateBookingForm.patchValue({
clientname : data.clientName.clientName,
bookingdate : data.bookingDate,
fromcity : data.fromCity,
tocity : data.toCity,
pickupdate : data.pickupDate,
returndate : data.returnDate,
carname : data.car.carName,
drivername : data.driver.driverName
});
}
editBooking(formdata:any){
let theForm = this.updateBookingForm.value;
this.bookingService.editBooking(this.bookingid, theForm).subscribe((res) => {
if (res.success === false) {
this.toastr.error(res.message);
} else {
this.toastr.success(res.message);
this.router.navigate(['/admin/booking']);
this.dialogRef.close();
}
this.updateBookingForm.reset();
});
}
close() {
this.dialogRef.close();
}
}
这是html File
<form class="well form-horizontal" [formGroup]="updateBookingForm" (ngSubmit)="editBooking(updateBookingForm.value)">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label">Booking Id</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span><strong>{{bookingid}}</strong></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Client Name</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<select class="form-control" formControlName="clientname" required>
<option *ngFor="let client of clients" value="{{client._id}}">{{client.clientName}}
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Booking Date</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input id="bookingDate" name="bookingdate" placeholder="Booking Date" class="form-control" required="true" value="" type="text" formControlName="bookingdate"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">From</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-upload"></i></span><input id="fromCity" name="fromcity" placeholder="From City" class="form-control" required="true" value="" type="text" formControlName="fromcity"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">To</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-download"></i></span><input id="toCity" name="tocity" placeholder="To City" class="form-control" required="true" value="" type="text" formControlName="tocity"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PickUp Date</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input id="pickupDate" name="pickupdate" placeholder="Pickup Date" class="form-control" required="true" value="" type="text" formControlName="pickupdate"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Return Date</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input id="returnDate" name="returndate" placeholder="Return Date" class="form-control" required="true" value="" type="text" formControlName="returndate"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Car</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="fas fa-car-side"></i></span>
<select class="form-control" formControlName="carname" required>
<option value="{{defaultCar._id}}" selected>{{defaultCar.carName}}</option>
<option *ngFor="let car of cars" value="{{car._id}}">{{car.carName}}
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Driver</label>
<div class="col-md-8 inputGroupContainer">
<div class="input-group"><span class="input-group-addon"><i class="fas fa-address-card"></i></span>
<select class="form-control" formControlName="drivername" required>
<option *ngFor="let driver of drivers" value="{{driver._id}}">{{driver.driverName}}
</option>
</select>
</div>
</div>
</div>
<div class="col-sm-12 controls">
<input class="btn btn-success" mat-raised-button (click)="dialogRef.close()" type="submit" value="Update Booking" />
</div>
</fieldset>
</form>
由于我使用的是反应形式，因此我如何使用formControlName绑定默认值。我曾尝试使用[ngModel], [value]，但无法正常工作。
默认值为空白。
这是我得到的输出。
我的下拉列表中有两辆车（tavera，ertiga）。并且this（ertiga）中的默认值也在列表中。我想在显示和列表的其余选项中设置默认值（ertiga）。
我们该如何设置？
