如何从我的下拉列表中检索用户选择的选项？

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

在li你可以在用户点击

时拨打电话

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

Header.component.ts

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

Answer 2

对于与@freddy 的回答有关的问题@V_stack

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

(blur) 后面写的条件为真后会失去下拉框的焦点

TS文件，初始化DropdownBlur为false，想关闭下拉时设置为true

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

如何从我的下拉列表中检索用户选择的选项？

How do I retrieve the user selected option from my dropdown list?

json

navigationbar

dropdown

angular