Question

我正在从数据库中获取产品，它们正在填充我的下拉菜单。

我有能力从下拉列表中选择一种产品，该产品包含计量单位（升，千克，盎司等）。因此，基本上，当我从下拉菜单中选择一种产品时，我想在下拉菜单下方显示控件中的计量单位，如上例所示。

这是我的html：

<div class="form-horizontal" action="">

    <div class="form-group">
        <label class="control-label dash-control-label col-sm-3">Title:</label>
        <div class="col-sm-6">
            <select class="form-control dash-form-control select2" style="width: 100%;">
                <option selected disabled>Search...</option>
                <option *ngFor="let ingredient of ingredients;" [value]="ingredient.id">{{ingredient.title}}</option>
            </select>
        </div>

        <div class="col-sm-3">
            <button type="button"
                    class="btn main-content-button mini-add-button"
                    data-toggle="modal"
                    data-target="#modal-3">
                <i class="fas fa-plus"></i>
            </button>
        </div>

    </div>

    <!--Unit of measure-->
    <div class="form-group">
        <label class="control-label dash-control-label col-sm-3" for="user-lastname">Unit of measure:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control dash-form-control read-only" placeholder="" value="Liter (L)" readonly>
        </div>
    </div>

    <!--Quantity-->
    <div class="form-group">
        <label class="control-label dash-control-label col-sm-3" for="user-password">Quantity:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control dash-form-control" id="user-password" placeholder="">
        </div>
    </div>

</div><!--End of form horizontal-->

因此，基本上在保存计量单位的输入中，我想获取所选产品的计量单位并在此处显示，它只是只读字段：）

这是我的打字稿代码，可以从DB获得产品：

export class ProductIngredientNewComponent implements OnInit {

  @Input() ProductId: string;

  // Array that will holds all Products which represent ingredients
  ingredients: Product[];

  id: string;
  constructor(public _productsService: ProductService) {

  }

  ngOnInit() {
    // Here I'm getting values from DB and this values are source to dropdown
    this._productsService.getAll().subscribe(ing => this.ingredients = ing);
  }

}

在选择下拉列表中的值时，是否需要附加事件，以手动将值设置为打字稿中的某个属性，并以度量单位显示它，还有另一种更好的，更具角度的方式？

谢谢大家干杯

Answer 1

您可以尝试使用以下代码检查您的问题是否解决。我有同样的情况，只是我的情况下有单选按钮。想法是将您的对象保存在Option的值中。并为其分配一个模型，该模型将包含从选择框中选择的值，并将相同的ngmodel绑定到您的输入。

希望它能为您服务！

<div class="col-sm-6">
            <select class="form-control dash-form-control select2" style="width: 100%;" [(ngModel)]="ingredient.title">
                <option selected disabled>Search...</option>
                <option *ngFor="let ingredient of ingredients;" [value]="ingredient">{{ingredient.title}}</option>
            </select>
        </div>

<input type="text" class="form-control dash-form-control read-only" placeholder="" value="Liter (L)" readonly  [(ngModel)]="ingredient.title">

Answer 2

使用Angular，您可以对选定的下拉项使用双向数据绑定。首先声明一个属性，该属性在组件中保存所选项目：

export class ProductIngredientNewComponent implements OnInit {
    selectedIngredient: Product;
    /* */
}

然后将ngModel指令添加到下拉菜单中，并将value更改为ingredient本身，而不是ingredient.id：

<select [(ngModel)]="selectedIngredient">
    <option selected disabled>Search...</option>
    <option *ngFor="let ingredient of ingredients;" [value]="ingredient"> 
        {{ingredient.title}}
    </option>
</select>

然后，您可以轻松地在输入字段中显示单位。当未设置selectedIngredient时，我还添加了一个检查以避免错误。

<input type="text" placeholder="Unit" [value]="selectedIngredient && selectedIngredient.unitOfMeasure" readonly>

如何根据下拉选择填充文本值类型的输入-Angular 5

2 个答案: