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

Question

Я создал навигационную панель, которая состоит из выпадающего списка. Как получить выбранную пользователем опцию и отобразить ее в моем домашнем компоненте? Элементы списка отображаются непосредственно из файла JSON, и я не использую для него теги «select-option». Есть ли способ сделать это с моим кодом?

Header.component.html

<nav class="navbar navbar-expand-sm">
                    <div class="container-fluid">
                  <ul class="nav navbar-nav">
                      <li class="dropdown">
                          <a class="navbar-brand" href="#room" class="dropdown-toggle" data-toggle="dropdown" role="button"> Rooms </a>
                          <ul class="dropdown-menu" >
                              <li  *ngFor="let room of room_list.rooms">
                                   <a class="navbar-brand" href="#room"  [routerLink]="['./room']" routerLinkActive="router-link-active">{{room.name}}</a> 
                              </li>
                          </ul>
                      </li>
                      <li>
                        <a class="navbar-brand" href="#home" [routerLink]="['/']" routerLinkActive="router-link-active"  >Home</a>
                      </li>
</ul>
      </div>
   </nav>

Header.component.ts

export class HeaderComponent implements OnInit {

  room_list: any;
  constructor() { 
  }

  ngOnInit() {
    //this.room_list = roomlist.default;

    this.room_list =JSON.stringify(roomlist.default);
    this.room_list=JSON.parse(this.room_list);
    console.log(roomlist);
  }

Answer 1

Для вашей проблемы, связанной с ответом @freddy @ V_stack

<li .. (click)="selectedRoom(room)" (blur)= "DropdownBlur = true " >

(размытие) потеряет фокус выпадающего меню после условия, записанного после того, как оно будет истинным.

Файл TS, инициализируйте DropdownBlur со значением false и установите его в значение true, если вы хотите закрыть раскрывающийся список

DropdownBlur = false;
...
selectedRoom(room):void {
console.log(room);
this.DropdownBlur = true;
}

Answer 2

На li вы можете позвонить, когда пользователь нажмет

<li .. (click)="selectedRoom(room)" >

Header.component.ts

selectedRoom(room):void {
    console.log(room);
}