写出我在角度列表中选择的内容

Question

我想写出我从选择列表中选择的选项。我知道我应该使用更改，但是现在我应该如何使用它。 ！现在我只是在写信以获取信件！

我的ts文件：

import { Component, OnInit } from '@angular/core';
import { selectBeverage } from "../interface-beverage";

@Component({
  selector: 'app-select-beverage',
  templateUrl: './select-beverage.component.html',
  styleUrls: ['./select-beverage.component.css']
})
export class SelectBeverageComponent implements OnInit {


    beverages: selectBeverage[] = [
      { id: 1, drink: "Beer" },
      { id: 2, drink: "Soda" },
      { id: 3, drink: "Wine" },
      { id: 4, drink: "Water" }
    ];



  clickedBeverage(){

  }
  constructor() {

   }

  ngOnInit(): void {
  }

}

我的模板文件：

<select [(ngModel)]="beverages">
  <option *ngFor="let b of beverages" [value]="b.id">
    {{b.drink}}
  </option>
</select>
<br><br>
One {{selectedOption}}, coming right up! ```

Answer 1

select [[（ngModel）]包含所选值，而不是选项列表。

。ts文件：

export class SelectBeverageComponent implements OnInit { 

...
// add member here
selectedOption: any; // instead of any one could use something more precise in the next step

...
}

模板文件：

<select [(ngModel)]="selectedOption"> <!-- i corrected value of ngModel, it contains the selected value -->
  <option *ngFor="let b of beverages" [value]="b.id">
    {{b.drink}}
  </option>
</select>
<br><br>
One {{selectedOption | json}}, coming right up! ```

Answer 2

在打字稿文件beverageToDisplay中创建一个变量，并绑定到模板中的该变量。

。ts

beverageToDisplay: string;

。html

<select [(ngModel)]="beverageToDisplay">
  <option *ngFor="let b of beverages" >
    {{b.drink}}
  </option>
</select>

<p *ngIf="beverageToDisplay">One {{beverageToDisplay}}, coming right up!</p>

[Working stackblitz在这里找到。