Angular 引导下拉列表无法处理每个循环数据

我正在处理Angular 8，其中我试图附加一个包含每个循环数据的引导下拉列表

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

<div *ngFor='let data of ApiData'>
  <p> {{data.name}} 

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>


    <p>
</div>  

引导下拉列表的代码

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

<div *ngFor='let data of ApiData'>
  <p> {{data.name}} 

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>


    <p>
</div>  

下拉示例

当我附加循环值时，按钮会出现，但下拉菜单不起作用

完整的html代码

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

<div *ngFor='let data of ApiData'>
  <p> {{data.name}} 

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>


    <p>
</div>  

{{data.name}
下拉示例

您可以使用

试着这样做：

.ts

.html

{{data.name}

下拉示例

{{menu}

---

实际上，您不会循环整个下拉列表。如果要显示正在循环的阵列中的菜单，需要执行以下操作：

<div class="dropdown" dropdown>
<a class="dropdown-toggle btn btn-primary  text-light" dropdownToggle> Dropdown Example</a>
<ul class="dropdown-menu">
    <div *ngFor='let data of ApiData'>
            <li><a href="#">{{data.name}}</a></li>
    </div>
</ul>
</div>

工作演示

---

在循环中尝试之前，您是否只使用一个元素尝试过一次，如果不是首先尝试的话。您在哪里使用“ApiData”的DAT？我认为这是因为您将所有内容都放在一个

标记中，请尝试在它之后添加下拉div。