如何根據下拉選擇填充文本值類型的輸入-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>