Как вывести данные по выбранному значению?

В Angular есть несколько способов вывести данные по выбранному значению. Один из самых распространенных способов - это использование двусторонней привязки данных (two-way data binding) с помощью [(ngModel)].

1. Подключите FormsModule в вашем модуле:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ]
})
export class AppModule { }

2. Создайте компонент с шаблоном и контроллером:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <select [(ngModel)]="selectedValue">
      <option *ngFor="let option of options" [value]="option">{{option}}</option>
    </select>
    <div *ngIf="selectedValue">
      Вы выбрали: {{selectedValue}}
    </div>
  `
})
export class YourComponent {
  options = ['Option 1', 'Option 2', 'Option 3'];
  selectedValue: string;
}

3. В шаблоне компонента создайте <select> элемент с привязкой [(ngModel)] к свойству selectedValue. Создайте несколько <option> элементов с помощью директивы *ngFor, указав значения из массива options.

4. Затем используйте дополнительный элемент <div>, который будет выводить выбранное значение только в том случае, если selectedValue не равно null или undefined.

Теперь, когда пользователь выберет значение в выпадающем списке, selectedValue будет обновлено и автоматически отобразится в элементе <div>. Если ни одно значение не выбрано, элемент <div> не будет отображаться.

Это простой пример, но вы можете адаптировать его под свои потребности. Важно помнить, что для использования двусторонней привязки данных с [(ngModel)] вам необходимо подключить FormsModule и импортировать его в вашем модуле.