在 angular 中选择该选项时，下拉菜单不会折叠

Question

大家好，谁能帮我解决以下错误
i am having problem with the dropdown menu collapse i can select the option but the dropdown does not collapse when the option is selected and when i collapse it manually it gives me the below error

ERROR

core.js:4197 ERROR TypeError: this._documentClickListener is not a function

我有这个功能 select 两个不同的数据集


isFemaleSelected: boolean = true;

  callMe(option: number) {
    if (option === 1) {
      this.AreaChartComponentRef.data = areaChartDataFemale;
      this.AreaChartComponentRef.updateChart();
      this.isFemaleSelected = true;
    } else {
      // this.isFemaleSelected = false;
      this.AreaChartComponentRef.data = areaChartDataMale;
      this.AreaChartComponentRef.updateChart();
      this.isFemaleSelected = false;
    }

Html代码

当 (click)="callMe(1) 一个 selected 时，它显示女性并且 (click)="callMe(2) 显示男性


    <div
      *ngIf="control"
      class="btn-group float-right float-none-xs mt-2"
      dropdown
    >
      <button
        id="button-basic"
        dropdownToggle
        type="button"
        class="btn btn-outline-primary btn-xs dropdown-toggle"
        aria-controls="dropdown-basic"
        *ngIf="isFemaleSelected"
      
      >
        {{ "dashboards.female-people" | translate }} <span class="caret"></span>
      </button>

      <button
        id="button-basic"
        dropdownToggle
        type="button"
        class="btn btn-outline-primary btn-xs dropdown-toggle"
        aria-controls="dropdown-basic"
        *ngIf="!isFemaleSelected"
        
      >
        {{ "dashboards.male-people" | translate }} <span class="caret"></span>
      </button>


      <ul
        id="dropdown-basic"
        *dropdownMenu
        class="dropdown-menu"
        role="menu"
        aria-labelledby="button-basic"
      >
        <li role="menuitem">
          <a class="dropdown-item" href="javascript:;" (click)="callMe(1)">{{
            "dashboards.female-people" | translate
          }}</a>
        </li>
        <li role="menuitem">
          <a class="dropdown-item" href="javascript:;" (click)="callMe(2)">{{
            "dashboards.male-people" | translate
          }}</a>
        </li>
      </ul>
    </div>


    ```

Answer 1

我通过在 callMe(option: number) 之后创建一个新函数解决了这个问题

  switchLabel() {
    if (this.isFemaleSelected) {
      return 'Female';
    } else {
      return 'Male';
    }
  }

然后

    <div
      *ngIf="control"
      class="btn-group float-right float-none-xs mt-2"
      dropdown
    >
      <button
        id="button-basic"
        dropdownToggle
        type="button"
        class="btn btn-outline-primary btn-xs dropdown-toggle"
        aria-controls="dropdown-basic"
      >
        {{ switchLabel() }}<span class="caret"></span>
      </button>

      <ul
        id="dropdown-basic"
        *dropdownMenu
        class="dropdown-menu"
        role="menu"
        aria-labelledby="button-basic"
      >
        <li role="menuitem">
          <a
            class="dropdown-item"
            href="javascript:;"
            (click)="switchData(1)"
            >{{ "dashboards.female-people" | translate }}</a
          >
        </li>
        <li role="menuitem">
          <a
            class="dropdown-item"
            href="javascript:;"
            (click)="switchData(2)"
            >{{ "dashboards.male-people" | translate }}</a
          >
        </li>
      </ul>
    </div>

在 angular 中选择该选项时，下拉菜单不会折叠

Dropdown does not collapse when the option is selected in angular

javascript

typescript

ngx-bootstrap

angular