ngModel 在 angular 中返回未定義

Question

我在 html 中有兩個下拉菜單。 第一個下拉列表給出選定的值，但第二個下拉列表返回未定義。

組件.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>

組件.ts

 selectedProduct:any;
    selectedProductVersion:any;

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

this.AllProductsVersion 是 Json 數據。 我可以使用此 function 根據所選產品設置產品版本。

selectedProduct 給出的結果是在下拉列表中選擇的任何內容，但 selectedProductVersion 給出的結果未定義。

Answer 1

嘗試改變這個：

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