Question

我创建了一个包含下拉列表的导航栏。如何检索用户选择的选项并将其显示在我的Home组件中？显示的列表项直接来自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 " >

（模糊）在条件成立后会失去对下拉菜单的关注。

TS文件，将 DropdownBlur 初始化为false，并在要关闭下拉菜单时将其设置为true

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

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

2 个答案: