小编yis*_*n11的帖子

在一切之前，我读到：

有关流程的问题1未定义

关于流程的问题2未定义

角度5问题

浏览器版本信息

所提供的信息均无济于事。我正在使用Angular 6，我想使用elasticsearch js将查询发送到elasticsearch。我安装了elasticsearch，弹性类型和弹性浏览器，如下所示：

npm install elasticsearch
npm install @types/elasticsearch
npm install elasticsearch-browser

我尝试使用--save和--save-dev进行安装，但都没有成功。

然后，我创建了一个带有角度cli的新项目：

import { Component } from '@angular/core';
import { Client } from "elasticsearch";

@Component({
  selector: 'app-root',
  template: `
<script src="/node_modules/elasticsearch/src/elasticsearch.js"></script>
  <div class="container">
  <div class="row">
      <button type="" (click)="onSendElastic()">Click Me!</button>
  </div>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  elClient: Client

  onSendElastic(){
    console.log('clicked on send elstic');
    this.connect()
    let res = this.elSearch()
    console.log(`res: ${res}`);

  }

  connect(){
    console.log('start connect...');

    this.elClient = new Client({
      host:"http://elasticIp:9200",
      log:"trace"
    }) …

我有 Angular 应用程序，作为它的一部分，我在 div 中显示查询结果（具有 JSONContainer 的 ID）。

我想突出显示结果中的特定查询，因此我使用了一个管道来搜索结果，并将文本中的 FIELD:VALUE 替换为：

<span class="highlightSpan">FIELD:VALUE</span>.

我将以下 css 添加到组件中：

div#JSONContainer span.highlightSpan{
    background-color: rgba(28, 243, 28, 0.5) !important;
    color:red !important;
    padding: 1px;
    margin:1px;
}

我尝试在 .highlightSpan 下添加相同的样式，得到相同的结果。

我使用存储整个 JSON 的“data”变量和存储查询的“query”变量，通过 insideHTML 插入此范围和其余文本：

    <div class="col-xs-12" id="JSONContainer"
        [innerHTML]="data | textHighlight:query">
    </div>

（我没有使用字符串插值，因为数据变量是 json 形状，我使用 html 代码对其进行样式设置，例如 html br 标记，并且字符串插值仅显示文本）。

当我将鼠标指向谷歌开发工具中的相关跨度时，我看到带有该类的跨度已创建：

但 css 样式没有应用，甚至没有显示在 google 开发工具中：

编辑：我知道它没有显示（我从 img 中删除了它），但跨度位于 div#JSONContainr 中，如所述。

编辑2：这是相关的树：

为什么会发生这种情况？

如何让css样式生效？

谢谢！