ng-bootstrap - ngbtooltip与[(ngModel)]无法正常工作

Question

我刚开始学习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)]时无法正常工作？谢谢。

- user9085943

---

这与 [ng-bootstrap] 相关。 - user9085943

Answer 1

我认为你想要做的是这样的：

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

model变量必须与[ngbTooltip]链接。

- Carlos Moya