Javascript 在“角度”中选择该选项时，下拉列表不会折叠

大家好，有人能帮我解决下面的错误吗 我有问题，下拉菜单折叠我可以选择该选项，但下拉菜单不折叠时，该选项被选中，当我折叠它手动给我以下错误

ERROR

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

我有一个选择两个不同数据集的函数

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代码

当（单击）=“callMe（1）one被选中时，它会显示女性，（单击）=”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>


    ```

{{“仪表盘.女性人士”{翻译}
{{“仪表盘.男性人士”{翻译}






```

我通过在callMe之后创建一个新函数（选项：number）解决了这个问题

然后

    <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>

{{switchLabel（）}}


{{“仪表盘.女性人士”{翻译}


{{“仪表盘.男性人士”{翻译}

什么是

下拉切换

/

*下拉菜单

等？节点模块ngx引导看起来像是一个未解决的问题

    <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>