Запишите, что я выбрал в моем списке <select>в angular - PullRequest
Новая
       45

Запишите, что я выбрал в моем списке <select>в angular

1 голос
/ 28 февраля 2020

Я хочу выписать опцию, которую выбираю из списка выбора. Я знаю, что я должен использовать изменения, но теперь, как я должен их использовать. ! теперь я просто пишу, чтобы получить буквы!

Мой файл 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! ```

Ответы [ 2 ]

1 голос
/ 28 февраля 2020

Создайте переменную в файле машинописного текста с именем beverageToDisplay и свяжите ее с шаблоном в теге <select>.

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

Рабочий стек найден здесь.

0 голосов
/ 28 февраля 2020

[(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! ```
...