Angular 2+ 獲取選定值的特定值

Question

在以下 Angular 2+ 代碼中，我在 TypeScript 中有一個數組：

models = [{idModele: 1, model: "Bianca", price: 500}, {idModele: 2, model: "etc", price: 600} ] 

我想知道，它是如何做到的，所以當我選擇特定的 model 時，我會自動以 < p > balise 或其他方式收到它的價格。

這是我的 HTML 示例：

 <select class="form-control" id="modeles" formControlName="modeles">
                    <option selected>Choisir...</option>
                    <option *ngFor="let modele of modeles">{{ modele.modele }}</option>
 </select>

Answer 1

試試下面的代碼。

HTML 代碼：

    <select class="form-control" id="modeles" [(ngModel)]="selectedValue">
    <option *ngFor="let model of models" [value]="model.price">{{ model.name }}</option>
</select>

<p>{{selectedValue}}</p>

Typescript 代碼：

 selectedValue: number;
  models = [
    { idModele: 1, name: "Bianca", price: 500 },
    { idModele: 2, name: "etc", price: 600 }
  ];

Answer 2

您可以輕松地做到這一點：

只需添加app.component.ts代碼，如：

export class AppComponent  {
  selectedPrice:Number
  models:Array<Object> = [
      {idModele: 1, model: "Bianca", price: 500}, 
      {idModele: 2, model: "etc", price: 600} 
  ] 
}

並添加app.component.html代碼，如：

<h1>Selecting Model</h1>
<select [(ngModel)]="selectedPrice">
  <option *ngFor="let model of models" [ngValue]="model.price">
    {{model.model}}
  </option>
</select>

<hr>

<p>{{ selectedPrice }}</p>

Answer 3

請試試這個

在 html

<select . . .  [(ngModel)]="selectedValue"> 
    <option *ngFor="let model of models" [value]="model?.price">{{model.name}}</option> 
</select> 

{{selectedValue}}

在 ts

selectedValue: number;
  models = [
    { idModele: 1, name: "Bianca", price: 500 },
    { idModele: 2, name: "etc", price: 600 }
  ];