javascript - 无法以 Angular 加粗表格的 td 标签内的特定单词

Question

我试图在表格中以粗体显示一些单词。也就是说，我在td里面放了一个句子标签，我想加粗该句子的一些单词。当我在 Html 中放入一个字符串并赋予该单词时，它正在工作。但是当我给出一个变量时它不起作用。

<table class="action_tables" border="1">
   <tr>
      <td class="header_column">Name1:</td>
      <td class="content_column">this is <b>bold</b></td>
   </tr>
   <tr>
      <td class="header_column">Name2:</td>
      <td class="content_column">{{element[0].matched_keyword}}</td>
   </tr>
   <tr>
      <td class="header_column">Subject1:</td>
      <td class="content_column">{{element[0].nlp_matched_sentence}}</td>
   </tr>
   <tr>
      <td class="header_column">bold value1:</td>
      <td class="content_column">{{x}}</td>
   </tr>
   <tr>
      <td class="header_column">bold value2:</td>
      <td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
   </tr>
</table>

. ts 文件

element = [
    {
      id: 5636,
      matched_keyword: "test",
      nlp_matched_sentence:
        "The <strong>Air Force</strong> Test Center"
    }
  ];

经过我的研究，我得到了 3 个解决方案，但没有一个对我有用。请查看演示以获取更多信息。

stackbliz demo

Answer 1

看看demo code

您需要添加 [innerHTML]如下:

    <td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>