我正在导入

从'@ ngx-translate / core'导入{TranslateLoader，TranslateModule};

从'@ ngx-translate / http-loader'导入{TranslateHttpLoader};

在我的应用程序中。该网站需要支持en（默认）和es（西班牙语）。所以我有两个文件en.json和es.json。我正在尝试使用这些文件的内容填充Bootstrap选项卡/药片。

en.json

{
  "TAB": {
    "REPORTS": "Reports","RESOURCES": "Resources","USEFULLINKS": "Useful Links"
  }
}

和es.json

{

  "TAB": {

    "REPORTS": "Informes","RESOURCES": "Recursos","USEFULLINKS": "Enlaces útiles"

  }

}

和模板：

<li class="nav-item">

  <a class="nav-link active" id="pills-reports-tab" data-toggle="pill" href="#pills-reports" role="tab"

     aria-controls="pills-reports" aria-selected="true">{{ 'TAB.REPORTS' | translate}}</a>

</li>

<li class="nav-item">

  <a class="nav-link" id="pills-resources-tab" data-toggle="pill" href="#pills-resources" role="tab"

     aria-controls="pills-resources" aria-selected="false">{{ 'TAB.RESOURCES' | translate}}</a>

</li>

<li class="nav-item">

  <a class="nav-link" id="pills-UsefulLinks-tab" data-toggle="pill" href="#pills-UsefulLinks" role="tab"

     aria-controls="pills-UsefulLinks" aria-selected="false">{{ 'TAB.USEFULLINKS' | translate}}</a>

</li>

但是，当出现选项卡时，引导程序似乎存在问题。 （如果我将它们显示在paragrah或标题HTML标签中，它们会很好显示）。对于Bootstrap，我使用的CDN在大多数情况下都可以正常运行。不知道我在想什么。请指导 这是文本在标签上的显示方式