值不会在视图上更新

场景：-我有一个简单的组件，可以提取数据并在视图中显示。有2个下拉菜单。当我从第二个下拉列表中选择一个值时，它将从API提取一些其他数据，并将它们分配给相关变量。最后，我在变量中使用这些值以在某些文本框中显示。

问题：-当我选择一个值时，它成功地从API提取了相关数据并分配给了变量。但是它不会在视图中更新。如果单击视图的某处（不在空白处的按钮上），它将立即在文本框中显示值。

component.ts：-

import {ChangeDetectorRef, Component, OnInit, SimpleChange} from '@angular/core';

import { DashboardService} from "@modules/dashboard/services";
// import { dashboardItemsModel} from "@modules/dashboard/components/dashboard-items/dashboard-items.model";

@Component({
  selector: 'sb-dashboard-items',
  templateUrl: './dashboard-items.component.html',
  styleUrls: ['./dashboard-items.component.scss']
})
export class DashboardItemsComponent implements OnInit {
    items : String[];
    selectedItems : {itemName : String, price : number}[] = [];
    addedItems : {itemName : String, quantity : number, price : number}[] =JSON.parse(localStorage.getItem('addedItems'));
    selectedItemType : String = ''
    selectedItemName : String = ''
    selectedItemDetails : {availableAmount: number, batch: String, expirationDate: String, flavour: String, itemId: number, itemName: String, liter: number, price: number, type: String}
    selectedItemAvailability : number
    selectedItemPrice : number
    selectedItemQuantity : number
    selectedItemDiscount : number
    discount : number = 0

  constructor(
     private dashboardService : DashboardService,
     private changeDetectorRef : ChangeDetectorRef
  ) {
        localStorage.setItem('addedItems', JSON.stringify(this.addedItems))
  }

  ngOnInit(): void {
      this.dashboardService.getItems()
          .subscribe(response => {
              this.items = response;
              this.changeDetectorRef.detectChanges();
          })
    }

  ngOnChanges(changes: SimpleChange){
        this.addedItems = JSON.parse(localStorage.getItem('addedItems'))
  }

  selectItemType(){
      //implementation
  }

  increment(itemName){
        //implementation
  }

  decrement(itemName){
        //implementation
  }

  delete(itemName){
        //implementation
  }

   getItemDetails(){
       this.dashboardService.getItemCount(this.selectedItemName)
          .subscribe(  async response => {
              this.selectedItemDetails = await response[0]                   //<------- this is the method used to fetch data from the API and assign to variables
              this.selectedItemAvailability = response[0].availableAmount
              this.selectedItemPrice = response[0].price
          })
    }

  add(){
      //implementation
  }

  getTotal(){
        //implementation
  }

  getSubTotal(){
        //implementation
  }

  checkQuantity(){
        //implementation
  }
}

component.html

<div class="row ml-3 mr-3 mt-3">
            <label class="col-form-label">Select Category :</label>
            <select class="form-control" [(ngModel)]="selectedItemType" (ngModelChange)="selectItemType()">
                <option value="" [selected]="true"> Please choose one </option>
                <option *ngFor="let item of items">{{item}}</option>
            </select>
        </div>
        <div class="row ml-3 mr-3 mt-3">
            <label class="col-form-label">Select Item :</label>
            <select class="form-control" [(ngModel)]="selectedItemName" (ngModelChange)="getItemDetails()">
                <option value="" [selected]="true"> Please choose one </option>
                <option *ngFor="let selectedItem of selectedItems">{{selectedItem.itemName}}</option>
            </select>
        </div>
        <div class="row ml-3 mr-3 mt-3">
            <div class="column mr-3">
                <label class="col-form-label">
                    Available Amount : <br/><input type="number"
                                                   class="mr-3"
                                                   [(ngModel)]="selectedItemAvailability" //<----- should update imediately when I select a value from the 2nd drop down
                                                   [disabled]="true">
                </label>
            </div>
            <div class="column ml-5">
                <label class="col-form-label">
                    Enter Quantity : <br/><input type="number"
                                                 [min]="1"
                                                 [max]="selectedItemAvailability"
                                                 [(ngModel)]="selectedItemQuantity">
                </label>
            </div>
        </div>
        <div class="row ml-3 mr-3 mt-3">
            <div class="column mr-3">
                <label class="col-form-label">
                    Price : <br/><input type="number"
                                        [min]="0"
                                        class="mr-3"
                                        [(ngModel)]="selectedItemPrice"> //<----- should update imediately when I select a value from the 2nd drop down
                </label>
            </div>
            <div class="column ml-5">
                <label class="col-form-label">
                    Item Discount : <br/><input type="number"
                                                [min]="0"
                                                [max]="100"
                                                class="mr-3"
                                                [(ngModel)]="selectedItemDiscount">
                </label>
            </div>
        </div>

如何解决此问题？提前致谢！