html - 为什么单击的项目没有在下拉列表中被选中，而是始终显示标题文本

Question

我的下拉菜单总是显示标题文本Select Location即使 click 不显示所选项目事件工作。
这是.html file

<div ngbDropdown class="d-inline-block">
 <button class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownMap" ngbDropdownToggle>Select Location</button>                
   <div ngbDrop4downMenu aria-labelledby="dropdownMap">

    <button class="dropdown-item" *ngFor="let country of countries" 
    (click)="mapCountry_selected(country)" >{{country}}</button>      
 </div>

</div>

代码在 .ts file

public mapCountry_selected(country)
 {
   var c=country;
 }

Answer 1

为了显示所选项目的国家/地区，您必须伪造您正在显示的标签。
你可以有一个变量selectedCountry这将显示所选国家或默认值“选择位置”
模板

<div ngbDropdown class="d-inline-block">
 <button class="btn btn-secondary btn-sm dropdown-toggle" id="dropdownMap" ngbDropdownToggle>{{selectedCountry}}</button>                
   <div ngbDrop4downMenu aria-labelledby="dropdownMap">

    <button class="dropdown-item" *ngFor="let country of countries" (click)="mapCountry_selected(country)" >{{country}}</button>      
 </div>

</div>

和 .ts 代码

  countries = ["Country 1", "Country 2", "Country 3"];
  selectedCountry = 'Select Location'

  mapCountry_selected(country) {
    this.selectedCountry = country
  }