html - 当在 ngbpopover 中使用 container="body" 时，Ngbpopover 不采用在 ng-template 中定义的外部 css

Question

我希望我的 ngbpopover 出现在父元素的顶部，因为它出现在父元素的下方。我已将 container="body" 放入 ngbpopover 以解决给定的问题，但不知何故，我在 ng-template 中定义的外部 css 没有出现。

<mat-tab-group animationDuration="0ms">
  <div *ngFor="let sampleData of sampleDataInfo[j]; let i=index">
    <mat-tab label="{{targetData[j][i].fullName}}">

      <table class="source-target-Info-table">
        <tr class="source-target-Table">
          <th><img data-toggle="tooltip" data-placement="bottom" title="Sub1"></th>
          <th>row2</th>
          <th>row3</th>
          <th>row4</th>
          <th>row5</th>
          <th>row6</th>
          <th>row7</th>
          <th>row8</th>
          <th>row9</th>
          <th>row10</th>
        </tr>
        <tr *ngFor="let target of targetData[j][i].files; let file=index">
          <td>
            <a class="info-link" href="javascript:;" title=" Log-{{sampleData?.sessionId}}" (click)="openDexLog(j,i)">
                                                            {{(1)}}
                                                        </a>
          </td>
          <td *ngIf="target.qualityLevel > 0; else negativeQuality">
            **<a class="info-link" href="javascript:;" title="Click to see Quality result files" href="javascript:;" placement="top-left" popoverClass="popover-class" [ngbPopover]="popContentQuality" container="body">{{target.qualityLevel}}</a>**
          </td>


          **
          <ng-template class="quality-popover" #popContentQuality>**
            <h1 class="quality-heading">Quality Results for</h1>
            <h3 class="file-name">{{target.name}}</h3>
            <table class="source-target-Info-table">
              <tr class="source-target-Table">
                <th>FILE NAME</th>
                <th>SIZE</th>
                <th>DESCRIPTION</th>
              </tr>
              <tr *ngFor="let tq of tqData; let i=index">
                <td>
                  <a class="info-link" href="javascript:;">{{tq.name}}</a>
                </td>
                <td>{{tq.size/1000}} KB</td>
                <td>{{tq.description}}</td>
              </tr>
            </table>
          </ng-template>
        </tr>
      </table>

    </mat-tab>
  </div>
</mat-tab-group>

如果以内联格式（使用样式）定义，则仅采用 css。当 ng-template 中的 ngbpopover 的 container="body" 时，是否有任何东西可以使外部 css 工作？我还尝试在由 body 标签组成的组件中定义外部 css，但这对我不起作用。任何有关此的建议都会有所帮助。

标签： htmlcssangularangular-materialng-bootstrap