Question

我正在将ngb-bootstrap用于Angluar 6，并使用一个显示表格的简单模式。我想使用tooltip或popover来显示有关该行的其他信息。模式/表格有一个滚动条，用于显示比模式更长的表格。

tooltip和/或popover在前几行中正确显示，但是向下滚动时，这些功能被隐藏，并且仅在表格滚动回到顶部时才会显示。

模态中的表如下：

<div class="modal-body  my-scroll-div4">
    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>PUNum</th>
            <th>pvNum &#47; Child</th>
            <th>Detail</th>
        </tr>
        </thead>
        <tr *ngFor="let version of compatDetail">
            <td>{{version.plPUNum}}</td>
            <td>{{version.pvNum}} &#47; {{version.pvNumChild}}</td>
            <td>
                <table>
                    <tr
                            [ngbPopover]='getTip(matchData.matchFlag)'
                            *ngFor="let matchData of makeArray(version.plMatchList)"
                    >
                        <td>{{matchData.pvNumPri}}</td>
                        <td>{{matchData.pvNumSec}}</td>
                        <td>{{matchData.matchFlag}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

makeArray函数仅获取一个对象并返回一个数组。 tooltip | popover函数是：

getTip(e) {     // "DeFlag' e to values
    let _retStr     = '';
    let _lE: number = e;
    for ( let _i = (this._systemFlags.length - 1); _i >= 0; _i-- ) {
        if (this._systemFlags[_i][1]['scValue'] <= _lE) {
            if (_retStr === '') { _retStr = this._systemFlags[_i][1]['scSName']} else
            { _retStr += ' | ' + this._systemFlags[_i][1]['scSName'];}
            _lE -= this._systemFlags[_i][1]['scValue'];
        }
    }
    if (_retStr === '') {
        _retStr = this._systemFlags[0][1]['scSName'];
    }
    return _retStr;
}

我尝试将tooltip|popover放在<td>中，并围绕所有<div>元素创建一个<td>，结果相同。

运行：

Angular CLI: 6.2.5
Node: 8.12.0
OS: linux x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.8
@angular-devkit/build-angular      0.6.8
@angular-devkit/build-ng-packagr   0.6.8
@angular-devkit/build-optimizer    0.6.8
@angular-devkit/core               0.8.5
@angular-devkit/schematics         0.8.5
@angular/cli                       6.2.5
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.8
@schematics/angular                0.8.5
@schematics/update                 0.8.5
ng-packagr                         3.0.6
rxjs                               6.3.3
typescript                         2.7.2
webpack                            4.8.3

$ yarn list --pattern bootstrap
yarn list v1.10.1
├─ @ng-bootstrap/ng-bootstrap@3.3.0
└─ bootstrap@4.1.3
Done in 1.33s.

一如既往，感谢您的慷慨帮助。

NGB-Bootstraip ToolTip和PopOver不会在模式下滚动

0 个答案: