时间戳

首页 > 解决方案 > 如何通过先前选择的项目 ID 填充下拉列表

bootstrap-4 - 如何通过先前选择的项目 ID 填充下拉列表

问题描述

我正在使用 productId、productName、skuId、Sku 和 Category Id 等多个值填充下拉列表，并使用 productName 显示下拉列表。

数据绑定是从 Webapi 到下拉列表。

代码：

this.productData = response.result;

<select id="prodcode" class="form-control" formControlName="prodCode"   required>
               <option [value]="''">Product Code</option>
               <option [ngValue]="product" *ngFor="let product of productData">
          {{product.productName}}
        </option>
     </select>

我可以从产品的ng价值中获取产品详细信息，如下所示：

产品名称、skuId、Sku、类别 ID。

在表单编辑时，我无法从数据表中填充下拉列表中的选定项目。我是这样写的：

 this.productForm.reset({
   prodCode: row.ProductId,
    qty: row.Quantity,
    mcp: row.MCP,
    weight: row.weight,
    rate: row.Rate
 )};

如何填充所选项目？

标签： bootstrap-4asp.net-core-webapiangular8textblock

解决方案

您没有为[ngValue]of分配正确的值<options>，对于上面的示例，它会在您使用时起作用[ngValue] = "product.productId"（检查this.productData大小写productId是否正确）</p> 

<select id="prodcode" class="form-control" formControlName="prodCode"   required>
           <option [value]="''">Product Code</option>
           <option [ngValue]="product.productId" *ngFor="let product of productData">
      {{product.productName}}
    </option>
 </select>

推荐阅读