首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ng-bootstrap下拉菜单似乎不适用于*ngFor

ng-bootstrap是一个基于Angular的开源UI组件库,提供了一系列易于使用和高度可定制的UI组件。下拉菜单是ng-bootstrap中的一个组件,用于创建具有下拉选项的菜单。

对于ngFor指令,它是Angular中的一个结构性指令,用于循环遍历一个集合,并为每个元素生成相应的HTML代码。然而,ng-bootstrap的下拉菜单组件似乎不适用于ngFor指令。

解决这个问题的方法是使用ng-bootstrap提供的ngbDropdown和ngbDropdownMenu组件来手动创建下拉菜单。首先,你需要在组件中导入这些组件:

代码语言:txt
复制
import { Component } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

然后,在模板中使用ngbDropdown和ngbDropdownMenu组件来创建下拉菜单:

代码语言:txt
复制
<div ngbDropdown>
  <button class="btn btn-primary" id="dropdownMenuButton" ngbDropdownToggle>
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" ngbDropdownMenu>
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

在上面的示例中,ngbDropdown指令用于创建一个包含下拉菜单的容器,ngbDropdownToggle指令用于触发下拉菜单的显示和隐藏,ngbDropdownMenu指令用于定义下拉菜单的内容。

这样,你就可以使用ng-bootstrap的下拉菜单组件来创建一个适用于*ngFor指令的下拉菜单。如果你需要进一步定制下拉菜单的样式和行为,可以参考ng-bootstrap的文档和示例。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):腾讯云提供的弹性计算服务,可快速创建和管理云服务器实例,支持多种操作系统和应用场景。了解更多信息,请访问腾讯云云服务器(CVM)
  • 腾讯云云数据库MySQL:腾讯云提供的高性能、可扩展的关系型数据库服务,适用于各种规模的应用程序。了解更多信息,请访问腾讯云云数据库MySQL
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令 顶

您可以将许多属性指令应用于一个宿主元素。 您只能将一个结构指令应用于宿主元素。 NgIf案例研究 NgIf是最简单的结构指令,也是最容易理解的。...这些相同的考虑适用于每个结构指令,无论是内置还是定制。 在应用结构指令之前,您可能想暂停一下,以考虑添加和删除元素以及创建和销毁组件的后果。...您将尝试将*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。 您仅可以将一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂的事情。...分组元素可能会破坏模板外观,因为CSS样式既不期望也不适应新布局。例如,假设您有以下段落布局。 I turned the corner {{h.name}} ({{h.emotion}}) 下拉菜单正常工作

16K20

如何设计下拉菜单(技巧+实例)

然而与之同时,下拉菜单又是最容易被错误使用的表单组件。这篇文章就来告诉大家下拉菜单的适用场景、设计技巧以及一些漂亮的实例。...什么时候适合用下拉菜单: 陈列子页面 下拉菜单通常适用于陈列所有需要展示的子页面,相当于一个子导航菜单,如下图: ? 博客内容分类 许多博客都会选择用下拉菜单来进行分类和罗列标签。...什么时候不适合用下拉菜单: 二元选择题(是/否) 建议使用复选框或开关。 ? 五个以内选项 建议使用单选框或分段选择器,这样就能一眼看到所有选项,而不需要去打开列表。 ?...设计下拉菜单时需注意: 尽量不要使用交互式下拉菜单 交互式下拉菜单指在同一页面内,用户选中某一菜单中的选项后,另一菜单的选项也会跟着变化。...这个办法方便快捷,但是仅适用于简单的罗列文字的下拉菜单。 ? 第二种,下拉选择+弹出面板。

2.9K84

CSS 下拉菜单与 focus

导航栏之所以不直接显示而是放进下拉菜单,也是为了在移动端等小尺寸设备中显示得优雅一点,因此这个单击判定其实是优势。...不过还是有点问题,比如一台 iPad mini 这种中尺寸设备,竖屏 + 鼠标情况下,但凡鼠标掠过就会调出下拉菜单;或者即便是 PC,把窗口缩小也同样是掠过频繁调出下拉菜单……毕竟是为了小尺寸设备设计的而其中并非全是触摸设备...,虽然 active 在移动端的响应是三个中和桌面端最贴合的,但并不适用于此场景。...因此,「Cards」主题在 iOS Safari 上会发生点击下拉菜单可以展开、但是点击空白地方无法收回的问题,除非之后点击的是链接之类的。...你可以对比尚未更新的 Theme Cards Demo 与本博客的下拉菜单,以实践认识上述内容。

5.4K20

导航设计的15个原则

对于喜欢挖掘网站各层级内容的典型用户来说,下拉菜单可以让用户快速浏览、节省时间。 为息息相关的内容提供本地导航。...确保下拉菜单不会太大或太小。鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感,因为用户还没来得及点击菜单里的某个链接的时候,下拉菜单就消失了。...下拉菜单内容比较多时,将用户最常点击的链接放到离鼠标悬停的选项最近的地方可以减少鼠标移动的距离(移动端也类似)。...当然,有的时候一些创新型菜单的确可以提升用户体验(下拉菜单就是一个例子)。...在某些场景下,由于新技术的独特要求,这15条原则也未必使用——举个例子,第4条 “确保导航菜单拥有足够的视觉吸引力” 就不适用于语音识别。

1.5K10

《Python完全自学教程》免费在线连载1.6

其中的“ embeddable package ”表示压缩文件;“ installer ”表示安装程序的可执行文件;“ 32-bit ”和“ 64-bit ”表示适用于不同位操作系统。...图1-6-7 适用于 macOS 的 Python 各版本安装程序 如果读者使用的是苹果公司生产的个人计算机,就必须要关注一条信息,2020年11月苹果公司发布了 M1 芯片,并用于 Mac 系列的个人计算机上...macOS 64-bit universal2 installer:对应的是应用于苹果公司自研 CPU 的安装程序(如图1-6-8所示,即为一款应用了苹果 M1 芯片的 MacBook Pro 计算机的...对于“ Downloads ”下拉菜单中的其他项不再一一说明了,读者可以自行了解。...若因此引起读者不适,本书作者不对此负责。

98830

如何关闭 YouTube 上的受限模式

事实上,YouTube 年龄限制通过阻止有害或冒犯性视频、粗俗语言和图形内容,避免他们观看任何不适当的内容,甚至是错误或意外地观看,从而确保为孩子提供合适且更安全的数字环境。...3.在下拉菜单中选择管理您的 Google 帐户。4.点击个人信息选项卡。5.在“基本信息”下将您的生日更新为正确的日期,然后选择“保存”。...最后,您将找到一个用于打开/关闭受限模式的切换选项。蓝色开关表示受限模式已打开,灰色按钮表示受限模式已关闭。...选择“设置”并打开“帐户设置”下拉菜单。现在打开/关闭限制模式。蓝色开关表示打开,而灰色按钮表示限制模式关闭。仅当您在移动应用和手机浏览器中使用相同的 YouTube 帐户时才使用此方法。...点击下拉菜单并选择受限模式。弹出一个框后,查看底部并关闭“受限模式”。一旦关闭,蓝色开关将变为灰色。您在带有过滤器的桌面或网络上关闭 YouTube 的受限模式时可能会遇到问题。

3.5K20

干货 | 红队和漏洞挖掘中那些关于文档的妙用(下)

点击左上角文件-新建文档-从空白页… 单机左侧的“页面“标签,选择与之对应的页面缩略图,然后从选项下拉菜单中选择“页面属性”命令 也可以在这个位置找到 在“页面属性”对话框单击“动作”标签,再从“...选择动作”下拉菜单中选择“运行 JavaScript”命令,然后单击【添加】按钮,弹出 JavaScript 编辑器对话框 在弹出的“JavaScript 编辑器”对话框中输入代码: app.alert...链接:https://github.com/ZeusBox/CVE-2021-21017 0X02 使用Word文档进行XXE攻击 1.了解一下DOCX文档的构造 使用DOCX文档进行XXE攻击,看上去似乎非常高级...这个位置ord/document.xml文件中 把它打开后发现是这样的 第一个位点在文档声明的下方,也就是这个位置 可以嵌入恶意代码,比方说 随后将这个压缩包的后缀名修改为DOCX,就得到了一个用于...这个手法主要用于攻击Libreoffice,Libreoffice是很多Word转PDF网站的常客,实战情况下有机会遇到。 按照上篇OLE+LNK钓鱼的姿势,先创建一个OLE对象先。

1.7K40

【交互探讨】无限滚动还是分页展示,这是个问题!

用户似乎会浏览到更多的内容并且参与度更高。这种模式是长列表的首选解决方案。 这是否意味着我们可以完全放弃无限滚动?并不是这样的。...用户还可以在分页下拉菜单中导航到特定页面。当然,折叠面板也可以在点击时打开页脚。(可在原文中查看视频案例) 将分页和无限滚动结合在一起 - 以及屏幕底部的粘性页脚。...所以选择带有下拉菜单到特定页面确实是个好主意。 用户可以跳转到特定页面,同时在浏览过程中使用无限滚动。也许当前页码旁边添加v字形下拉按钮会使它更加明显。...这类体验的一个有趣原型是Rauno Freiberg创造的迷你地图试验(目前只适用于Firefox),以及其他许多很棒的试验。 迷你地图试验允许用户标记屏幕上的某些区域,并更快地跳转。...现在,所有这些似乎都是为了让无限滚动更好。所有工作是否值得的最终问题必须由您的用户应该实现的目标来回答。无限滚动并不适合每个网站,无穷无尽的选项列表需要通过适当的过滤、排序和搜索来补充。

3.1K20

介绍新的 GitLab 分支源插件

Jenkins 配置即代码 (JCasC) 也可以用于配置服务器。要想了解更多关于服务器配置的信息,请参考我之前的博客。...凭据用于获取项目的元数据,并在 GitLab 服务器上设置 hook。如果令牌具有管理访问权限,您还可以设置 系统 Hook,而 Web Hook 可以从任何用户令牌设置。...Server - 从下拉菜单中选择所需的 GitLab 服务器,需要在创建此任务之前进行配置。...Projects - 从下拉菜单中选择要构建的项目。 Behaviours - 这些特性是非常强大的工具,用于配置构建逻辑和构建后逻辑。我们定义了新的特性。您可以在仓库文档中看到所有信息。...您可以添加 Discover subgroup project 的特性,该特性允许您发现组或子组中所有子组的子项目,但此特性不适用于用户。在索引时,web hook 在每个项目中创建。

2.3K10

期待已久的动态数据库工具终于来了!

△ Database Inspector 可用于修改数据, 就像修改电子表格一样 有了 Database Inspector,修改数据库就和编辑电子表格一样简单。...△ Database Inspector 窗口 运行 Database Inspector 需要在 API Level 26 或者更高的设备上运行应用,在下拉菜单里选择该应用的进程: ?...△ 在下拉菜单中选择运行中的应用进程 选择所要检查的应用进程之后,数据库的架构就会出现在下面的面板上。...△ 点击 Run Query 并且选择应用数据库 然后,在数据库下拉菜单旁边的文本框里输入下面这句查询语句,并点击 Run。...应用的 UI 似乎正常显示了所需浇水的日期。在下一步开发中,我们也许可以增加一个提醒功能,当已经超出浇水日期的时候,可以向用户发出提醒。 快来尝试新推出的 Database Inspector!

2.1K30

导航设计的10种模式

缺点: 不适合展现顶层入口框架; 容易形成界面内容过多,显得杂乱; 设计效果容易呆板。 ?...缺点: 用户不易发现,使用次功能需要二次点击,给用户在切换功能带来了操作成本; 可见性太差,用户还没能把汉堡菜单按钮和侧边栏联系起来,所以,侧边栏的渗透率很低; 不直观、不适用于主导航、如遇频繁操作的功能...iOS中下拉菜单为自定义控件,可以实现不同类别之间的切换; 下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多。 ?...缺点: 条目太多或分布不合理会导致用户查找困难; 不适合需要频繁切换任务的情况。 ?...优点: 适用于平台级的产品; 缺点: 可能会增加用户的认知负担。

3.4K40

Unity通用渲染管线(URP)系列(十四)——多相机(Camera Blending & Rendering Layers)

只要我们禁用Bloom,这似乎就可以工作。我添加了两个非常明亮的自发光对象,以使Bloom是否开启变得显而易见。 ? ?...对于不透明的材质来说,这似乎很简单,但是如果最终使用的base map也包含变化的alpha,那么它将出错。剪辑材质也可能出错,因为它们依赖于alpha阈值来丢弃片段。...场景窗口可以通过编辑器右上方的Layers下拉菜单过滤显示的层。同样,每个摄像机都具有Culling Mask属性,该属性可用于限制以相同方式显示的内容。在渲染的剔除步骤期间应用此掩码。...它适用于MeshRenderer组件,但不幸的是灯光的属性无法响应更改。出现渲染层下拉菜单,但未应用调整。我们无法直接解决此问题,但是可以添加我们自己的有效版本的属性。...(相机渲染层掩码 暴露为整数) 要将掩码显示为下拉菜单,我们需要为其创建自定义GUI。但是,与其为整个CameraSettings类创建一个自定义编辑器,不如让它仅用于渲染层掩码。

8.3K22
领券