*ngFor 无法与引导下拉菜单一起正常工作

Question

我正在尝试创建多个包含弹出窗口链接的下拉按钮。 这是我的 HTML 代码：

<div *ngFor="let service of index.value | keyvalue: unsorted; let j = index" class ="btn-group">
      <ul style="list-style-type:none;">
        <li *ngFor ="let key of service.value | keyvalue: unsorted">   
          <ng-template #tipContent>Timestamp: {{key.value}} </ng-template>
          <button *ngIf="key.key.includes('timestamp')" class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" [ngbTooltip]="tipContent" id = "msg{{i}}{{j}}" [style.marginLeft.px] = "getLeftMargin(j)">
            {{service.key}}
          </button>


<!-- Error occurs here, unable to create this menu --> 
          <div *ngFor ="let msg of key.value | keyvalue: unsorted" class="dropdown-menu">
            <ng-template #tipContent>Timestamp: {{msg.value}} </ng-template>

          <!-- When this button is clicked, it displays a popup with the message in the div below -->
          <button *ngIf ="msg.key.includes('InTimestamp')" class ="dropdown-item" [ngbTooltip]="tipContent"  (click)="openPopUp(trace.traceId+'Incoming'+service.key)">
            Incoming
          </button>  
            <div *ngIf ="msg.key.includes('Incoming')" id="msg{{trace.traceId}}Incoming{{service.key}}" class ="modal">
              <div class="modal-content">
                <span id="close{{trace.traceId}}Incoming{{service.key}}" class='close'>&times;</span>
              <p>{{msg.value}}</p>
              </div>
            </div>
          
          
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
         
      
 
        </li>
      </ul>
      
    </div>

每当我单击下拉菜单时，我都会收到此错误：

zone-evergreen.js:171 未捕获类型错误：无法读取 null 的属性“setAttribute”

为什么我不断收到此错误，我该如何解决？

Answer 1

以下行

<div *ngFor ="let msg of key.value | keyvalue: unsorted" class="dropdown-menu">

将使用class="dropdown-menu"创建多个div标签

我不是 html 的专家，但这似乎不对。 从这里快速搜索是有人会如何使用它

      <div class="dropdown-menu">
         <a class="dropdown-item" *ngFor ="let msg of key.value | keyvalue: unsorted" href="#">{{msg}}</a>           
      </div>