MEAN (Angular 6): Как заполнить данные из mongodb в раскрывающемся списке для обновления формы?

Question

Я создаю стековое приложение MEAN (Angular 6).Во время обновления формы я хочу, чтобы выпадающий список заполнялся для редактирования данных.Как я могу это сделать?Я пробовал следующий код, но он не работает.

Вот мой edit-booking component

getOneBooking(id){
    this.bookingService.getBooking(id).subscribe((res) => {
          this.currentBooking = res;
           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
    });
  }
  
   getAllCars(){
      this.carService.getCars().subscribe((res) => {
          this.cars = res;
        }, err => {
          console.log(err);
        });
    }
  
  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();
      });
}

здесь html

<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>
                        <input id="fullName" name="clientname" placeholder="Client Name" class="form-control" required="true" value="" type="text" formControlName="clientname">
                    </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>
<!--                        <input id="fullName" name="carname" placeholder="Car Name" class="form-control" required="true" value="" type="text" formControlName="carname">-->
                    <select class="form-control" formControlName="carname" >
<!--                          <option selected>Select Car</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>
                       <input id="driverName" name="drivername" placeholder="Driver Name" class="form-control" required="true" value="" type="text" formControlName="drivername">
                    </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>

Я хочу заполнить все автомобили в выпадающем списке в форме редактирования.Как я могу это сделать?