Selection option is not working on angular 11

export interface Product {
    id: number;
    name: string;
    description: string;
    scale: string;
    price: number;
    variants: ProductVariant[];
}

export interface ProductVariant {
    id: number;
    productId: number;`
    roastingTypeId: number;
    weightCoffee: string;
    priceCoffee: number;
    
  }
//=========component.ts==============
export class ProductDetailsComponent implements OnInit {
  private basketSource = new BehaviorSubject<Basket | null>(null);

  products: Product;
 constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute) { 
      this.bcService.set('@productDetails', '');
  }

ngOnInit(): void {
   this.loadProduct();
   //this.getRoastingOption();
   this.getRoast();
   this.getWeight();
   this.getproductTest();
  }
  loadProduct() {
    const id = this.activatedRoute.snapshot.paramMap.get('id');
    if (id) this.shopService.getProduct(+id).subscribe({
      next: Product => {
        debugger;
        this.products = Product;
   }
//====================HTML=============================
select class="form-control" formControl="option.weightCoffee" id="weightCoffee" (change)="onRoastingoption($event.target.value)">
                      <option value="">please select roasting option ...</option>
                      <option *ngFor="let option of products.variants" [value]="option.value">{{ option.weightCoffee }}</option>
                    </select>