无法以角度加粗表格的 td 标签内的特定单词

Sha*_*med 3 html javascript typescript angular

我试图在表格中以粗体显示一些单词。也就是说,我在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>
Run Code Online (Sandbox Code Playgroud)

. .ts文件

element = [
    {
      id: 5636,
      matched_keyword: "test",
      nlp_matched_sentence:
        "The <strong>Air Force</strong> Test Center"
    }
  ];
Run Code Online (Sandbox Code Playgroud)

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

stackbliz 演示

Sha*_*vek 5

看一下演示代码

您需要添加[innerHTML]如下:

    <td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>
Run Code Online (Sandbox Code Playgroud)