写出我在我的<select>以角度列表

Question

I want to write out the option i choose from my select list. I know that i should use change but now how i should use it. !now im just writing to get the letters in!

My ts file:

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 {
  }

}

My template file:

<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

Create a variable in the typescript file named beverageToDisplay and bind to that in the template within the <select> tag.

.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 found here.

Answer 2

The [(ngModel)] of the select contains the selected value, not the list of options.

.ts file:

 export class SelectBeverageComponent implements OnInit { ... // add member here selectedOption: any; // instead of any one could use something more precise in the next step ... }

Template file:

 <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! ```