ホーム>source

データベースから製品を取得していますが、ドロップダウンにデータが入力されています。

ドロップダウンから製品を選択することができます。その製品には測定単位(リットル、キロ、オンスなど)が含まれています。したがって、基本的にドロップダウンから製品を選択するとき、上記の例のように、ドロップダウンの下にコントロールで測定単位を表示したいと思います。

これが私の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);
  }
}

ドロップダウンの値が選択されたときにイベントをアタッチして、値を手動でタイプスクリプトのプロパティに設定し、測定単位で表示する必要がありますか?

みんなありがとう 乾杯

あなたの答え
  • 解決した方法 # 1

    次のコードを使用してみて、問題が解決したかどうかを確認してください。私の場合、ラジオボタンがあっただけで同じ状況になりました。アイデアは、オブジェクトをオプションの値に保存することです。そして、選択ボックスから選択した値を含むモデルをそれに割り当て、同じ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">
    
    

  • 解決した方法 # 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>
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ java - 行21ショー。期待される