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

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

我可以从下拉列表中选择产品，该产品包含计量单位（升、千克、盎司等）。所以基本上，当我从下拉列表中选择一个产品时，我想在下拉列表下面显示控制中的度量单位，如上面的示例所示

这是我的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-->

当选择下拉列表中的值时，我是否需要附加事件，以手动将值设置为typescript中的某个属性，并以度量单位显示它，当然还有其他更漂亮、角度更大的方法

谢谢各位

---

干杯

您可以尝试使用以下代码并检查您的问题是否得到解决。我也有同样的情况，只是我的箱子里有单选按钮。其想法是将对象保存在选项的值中。并为其分配一个模型，该模型将包含从选择框中选择的值，并将相同的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">

搜索。。。
{{component.title}

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

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

然后将

ngModel

指令添加到下拉列表中，并将

值更改为
成分本身，而不是
成分。id
：

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


搜索。。。
{{component.title}

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

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


我遇到了无法读取未定义的属性“unitOfMeasure”的问题，可能是因为加载组件时未选择任何内容，且值未定义。您是对的。如果没有默认的选定值，则SelectedGredient将未定义。你有多种选择来解决这个问题。隐藏该单元的输入字段或添加检查，检查SelectedGredient是否有值。我应该在哪里以及如何检查SelectedGredient是否有值？你能举个例子吗？
<input type="text" placeholder="Unit" [value]="selectedIngredient && selectedIngredient.unitOfMeasure" readonly>