当前位置: 首页 > 知识库问答 >
问题:

*NGFOR不能正常使用引导下拉菜单

公良阳波
2023-03-14

我正在尝试创建多个包含弹出窗口链接的下拉按钮。这是我的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未捕获的TypeError:无法读取null的属性“set attribute”

为什么我一直得到这个错误,我该如何修复它?

共有1个答案

秦毅
2023-03-14

我最好的选择是

keykey.value之前以空开头

keyvalue管道的unsorted函数在哪里

*ngfor=“让msg of key.value keyvalue:unsorted”

 类似资料:
  • 关于我的上一个问题(bootstrap上的下拉菜单不起作用),我正在为li下拉菜单的子菜单构建一个子菜单。这意味着它是嵌套的。银行菜单下有交易下拉菜单,交易下拉菜单下有不同类型交易的菜单。顺便说一下,我已经成功地创建了它,但是在悬停期间,“事务”模块的子菜单出现在事务菜单的前面,阻止了作为事务的父菜单。在悬停期间,如何避免它并将其放置在事务菜单的右侧?不管怎样,我已经使用了“右下拉菜单”,但它不会

  • Bootstrap3仍在RC中,但我只是尝试实现它。我不知道如何设置子菜单类。即使css中没有类,即使是新文档也没有提到它 它存在于2. x中,类名为下拉子菜单

  • 我正在建立一个自定义的网站使用一个儿童主题的Wordpress‘店面',但我有很大的问题与移动引导导航切换。 与菜单切换响应菜单,它不显示下拉在870px宽,只显示在714px宽。我一直试图解决这个问题,但没有成功,我唯一注意到的是切换器上的按钮类。如果您查看代码检查器,aria-expanded=“false”显示在大约870px宽的地方,如果我手动在代码中输入值“true”,那么它会读为ari

  • 我试图找出一个解决方案,在菜单项中有子菜单。我有2个下拉按钮(报告和视图)在菜单项是一个下拉项目本身。当我点击第一个按钮时,它会在下面显示子菜单,但是当我点击第二个下拉按钮时,它仍然会显示第一个子菜单项,而不是第二个子菜单项。我尝试使用btn-group对每个按钮进行分组,但当我这样做时,它会破坏按钮,当你点击按钮时,菜单就会消失。有什么建议吗?谢啦

  • 我实现了这个Bootstrap 3 Navbar折叠来改变Navbar折叠,但我有一个问题,在nav上的切换。 我为最小宽度:992px放入这个,使我的菜单悬停打开,而不是切换桌面大小。 我遇到的问题是,当我在sm大小中切换一个菜单项时。下拉菜单不会直接切换到下面。它会在右手边爆炸。我似乎找不到什么是css选择器,它直接放在下面,而其他项目“移开的方式” 这就是正在发生的事情 我要这个是SM号的

  • 在Bootstrap 4中最简单的方法是什么?我在SO上找到的所有示例要么太乱,要么没有包含在NAV中。 我试过把下拉列表放在下拉列表中,但这似乎不起作用。有人能帮我弄一下这个吗? 下面是我的代码的基本大纲: null null