如何使用formControlName从Angular 6中提供的对象中选择/绑定下拉列表中的默认值？

Question

我想在下拉列表中设置默认值，但是它显示为空白，然后在选项列表中显示默认值。 如何在其中显示默认值？

我正在制作（学习）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）。

我们该如何设置？