ng-bootstrap - ngbtooltip 不适用于 [(ngModel)]

2024-04-29

我是 Angular 4 和 bootstrap beta 2 的新手,并尝试使用ngbtooltip显示工具提示文本。当只有输入没有时,标签上的工具提示工作正常[(ngModel)]。我一用过[(ngModel)]在输入文本控件中,工具提示仅显示第一个标签,其他标签则不显示。 在下面的代码中,如果我删除ngModel,所有标签工具提示均按预期显示。

<div class="col-lg-12 col-md-12 col-sm-12 ">
  <div class="col-lg-12 col-md-12 col-sm-12  container accordion" id="accordion">
    <div id="collapseDealSummary" class="col-lg-12 col-md-12 col-sm-12  card-block collapse show row">
      <div class="col-lg-12 col-md-12 col-sm-12 card-body row">
        <div class="col-lg-6 col-md-12 col-sm-12">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1" placement="top" triggers="hover" ngbTooltip="Tooltip on for label 1">
                <label>label 1<span>*</span></label>
                <input type="text" class="form-control" id="txtid" name="txtid" [(ngModel)]="Label1Value" />
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1" placement="top" triggers="hover" ngbTooltip="Tooltip on for label 2">
                <label>label 2<span>*</span></label>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1">
                <label placement="top" triggers="hover" ngbTooltip="Tooltip on for label 3">label 3<span>*</span></label>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 form-group pull-left mx-0 px-1">
                <label placement="top" triggers="hover" ngbTooltip="Tooltip on for label 4">rlabel 4<span>*</span></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

知道为什么工具提示不能正常工作吗[(ngModel)]? 谢谢


我认为你想做的是:

<button type="button" class="btn btn-outline-secondary" [ngbTooltip]="tipContent">My button</button>

模型变量必须链接到 [ngbTooltip]。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-bootstrap - ngbtooltip 不适用于 [(ngModel)] 的相关文章

随机推荐

  • 如果未登录则重定向 html 页面

    我的网页上有简单的登录表单 它使用 javascript 来登录用户并且工作正常 问题是 用户直接在地址栏中输入登陆页面 URL 他无需登录即可直接访问该页面 如果他没有登录 我想将他重定向到登录页面 以下是loding和目标页面的链接 l
  • 当按下 flutter 中编写的按钮时,有没有办法运行 python 脚本?

    本质上 我想做的是 按下我在 Flutter 中编程的按钮 当按下该按钮时 Python 脚本应该开始在我的 Android 设备上运行 我想在 python 中使用 youtube dl 用于下载 Youtube 视频 库 但我想知道是否
  • Google Cloud Build 获取身份令牌

    在我的场景中 我想在 Google Cloud Build 期间触发基于 HTTP 端点的 Google Cloud Function HTTP 请求是使用 python 3 7 slim 容器的步骤完成的 基于this https clo
  • 如何在 Chart.js 中将 Y 轴值从数字更改为字符串?

    我在用Chart js http www chartjs org 我正在尝试更改 y 轴 请参见下面的屏幕截图 我尝试填写yLabels具有字符串数组的属性 但这没有用 任何帮助 将不胜感激 jQuery document ready fu
  • 如何在 Firebase 实时数据库上安排通知?

    我正在为我工 作的公司开发一个 flutter 通信应用程序 但我遇到了两个问题 这是我需要做的 1 向用户组或特定用户发送通知 并将这些通知保存在数据库或json文件中 该列表将作为 最新新闻 出现在我的应用程序的主屏幕上 问题是 当应用
  • 是否可以从一个存储库中拉取并推送到另一个存储库?

    我在 github 上有一个公开的存储库 在那里我有一个正在开发的开源应用程序 用于制作产品目录和小型 cms 内容 我还有一个私有存储库 未托管在 github 中 它是在 github 中托管的开源应用程序下开发的应用程序 由于我目前正
  • 如何使用Python优化大型数据集的API调用?

    客观的 将地址列表发送到 API 并提取某些信息 例如 指示地址是否位于洪水区域的标志 Solution 适用于小数据的 Python 脚本 Problem 我想针对大输入优化当前的解决方案 如何提高 API 调用的性能 如果我有 100
  • Numpy - 两个矩阵的行之间的协方差

    我需要计算两个不同矩阵的每一行之间的协方差 即第一个矩阵的第一行与第二个矩阵的第一行之间的协方差 依此类推 直到两个矩阵的最后一行 我可以在没有 NumPy 的情况下使用下面附加的代码来完成此操作 我的问题是 是否可以避免使用 for 循环
  • ApplicationDelegate类的要点

    在 Objective C 中将变量和方法签名放在 ApplicationDelegate h 中的要点是什么 通过这样做 所有这些方法和变量都可以被另一个视图控制器类看到吗 这是重点吗 另外 每个项目中是否只有一个应用程序委托类 应用程序
  • 如何让我的 DIV 出现在另一个 DIV 下方

    我有这样的情况 div div div Div A 是 B 和 C 的全屏宽度容器 Div B 是一个小矩形 例如 100 x 200 px Div C 是另一个小矩形 例如 100 x 200 像素 现在发生的情况是 B 和 C 出现在同
  • 计算一系列 csv 文件的行数

    我正在学习 R 教程 并怀疑我必须使用其中一个函数 但我不确定是哪一个 是的 我研究了它们 但在我更加熟悉 R 术语之前 它们非常令人困惑 在我的工作目录中有一个文件夹 specdata Specdata 包含数百个名为 001 csv 3
  • 使用 Xlib 捕获鼠标

    我想编写一个简单的 Xlib 程序来改变鼠标行为 举个例子 反转垂直移动 我在捕获事件时遇到问题 我想要代码 捕获控制器位置的变化 我向上移动鼠标 MotionEvent 计算新的光标位置 new x difference x 设置新的光标
  • Docker 应用程序更新后无法连接到数据库

    在我的公司 我有一个旧的 Symfony 应用程序在 Docker 容器中运行 该应用程序连接到一个 SQL 数据库 该数据库也在 Docker 容器内运行 该图像是使用 php 7 2 apache stretch 构建的 但该版本已不再
  • 如何在杂志/报纸等砖石布局中浮动元素?

    我正在尝试实现一种布局 其中项目将像报纸 杂志文章部分一样浮动 它类似于什么jQuery 的砌体 http masonry desandro com 做 但我试图仅使用 CSS3 来实现这一点 我想也许box显示属性可以做到这一点 尽管尝试
  • 如何在WebView中隐藏滚动条?

    我切换到WKWebView因为UIWeb视图Apple 不再建议使用 使用以下代码从 WebView 中的容器加载 HTML 文件 let webview myWKWebViewClass webview for Bundle main f
  • 按字段关联 ELK 中的消息

    相关 在ELK中合并日志和查询 https stackoverflow com questions 28429607 combine logs and query in elk 我们正在设置 ELK 并希望在 Kibana 4 中创建可视化
  • 如何在 PhantomJS 中使用 JavaScript 检测网页上的声音?

    我需要检测带有横幅的网页中的所有声音 我怎样才能做到这一点 我查看 PhantomJS 但找不到浏览器声音的 API PhantomJS 1 x 和 2 不支持 Flash
  • 延迟加载使用 document.write 的双击广告的最佳方法是什么?

    通过 doubleclick 请求的广告通常由广告提供商网络提供服务 该网络返回 javascript 进而执行 document write 以将广告放置在页面中 使用 document write 要求文档处于打开状态 这意味着页面尚未
  • 使用 Mono Cecil 添加 try-catch

    我正在使用 Mono Cecil 在另一个方法中注入代码 我想在我的代码周围添加一个 Try Catch 块 所以我写了一个带有 try catch 块的 HelloWorld exe 并反编译了它 Try Catch 的 Reflecto
  • ng-bootstrap - ngbtooltip 不适用于 [(ngModel)]

    我是 Angular 4 和 bootstrap beta 2 的新手 并尝试使用ngbtooltip显示工具提示文本 当只有输入没有时 标签上的工具提示工作正常 ngModel 我一用过 ngModel 在输入文本控件中 工具提示仅显示第