ngModel 在 angular 中返回未定义

Question

I have two drop down in html. First dropdown is giving the selected value but the second dropdown is return as undefined.

component.html

<form class="form row">
<div class="inputGroup inputGroup--medium">
        <label class="inputGroup__label is-required">Product</label>
        <div class="selectWrapper">
          <select id="selectProduct"  class="inputGroup__select" [(ngModel)]="selectedProduct"
            (ngModelChange)="setProductVersion($event)"[ngModelOptions]="{standalone: true}">
            <option selected value="" disabled>Select Product</option>
            <option *ngFor="let product of Products" [value]="product.name">
              {{ product.name}}
            </option>
          </select>
        </div>
      </div>
 <div class="inputGroup inputGroup--medium">
        <label class="inputGroup__label is-required">Product Version</label>
        <div class="selectWrapper">
          <select id="selectProductVersion" class="inputGroup__select"           
          [(ngModel)]="selectedProductVersion" [ngModelOptions]="{standalone: true}">
          <option selected value="" disabled>Select Product Version</option>
            <option *ngFor="let pVersion of ProductsVersion" [value]="pVersion.name">
              {{ pVersion.productVersion}}
            </option>
          </select>
        </div>
      </div>
</form>

component.ts

 selectedProduct:any;
    selectedProductVersion:any;

 setProductVersion(event){
  const filteredResult = this.AllProductsVersion.filter(x=> x.productName ==this.selectedProduct);
  this.ProductsVersion=filteredResult;
 }

this.AllProductsVersion is Json data. and i'm able to set the product version based on selected product using this function.

selectedProduct is giving the result whatever is selected in dropdown but selectedProductVersion is giving as undefined.

Answer 1

try changing this:

 <option selected value="" disabled>Select Product Version</option>
            <option *ngFor="let pVersion of ProductsVersion" [value]="pVersion.productVersion">
              {{ pVersion.productVersion}}
            </option>