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

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>