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 }
  ];