Angular表格td标签内特定文字无法加粗问题求助

Hey there, I see the issue you're facing! The problem here is that Angular's interpolation binding ({{ }}) automatically escapes HTML content to prevent XSS attacks, which is why your <strong> tags are showing up as plain text instead of rendering bold text.

Let me break down why this happens and how to fix it:

Why your current approach isn't working #

When you use {{ element[0].nlp_matched_sentence }}, Angular takes the string content (including things like <strong>) and escapes it—meaning it converts HTML special characters into their entity equivalents (like < becomes <). The browser then renders this as raw text, not as HTML elements.

The fix: Use [innerHTML] instead of interpolation #

Angular provides the [innerHTML] property binding specifically for cases where you want to render HTML content from a variable. Here's how to adjust your code:

First, update your HTML template to replace the interpolation with [innerHTML] for the problematic <td> elements:

<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" [innerHTML]="safeSentence"></td>
  </tr>
  <tr>
    <td class="header_column">bold value1:</td>
    <td class="content_column" [innerHTML]="safeX"></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>

Next, you'll need to handle two things in your component:

1. Decode HTML entities: Your nlp_matched_sentence has escaped HTML (like <strong> instead of <strong>), so we need to convert those back to actual HTML tags.
2. Mark content as safe: Angular will block untrusted HTML by default, so we'll use DomSanitizer to tell Angular this content is safe to render.

Here's the updated TypeScript code:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  // Your component metadata (selector, templateUrl, etc.) goes here
})
export class YourComponent implements OnInit {
  element = [
    {
      id: 5636,
      matched_keyword: "test",
      nlp_matched_sentence: "The <strong>Air Force</strong> Test Center"
    }
  ];
  x = "This is <strong>bold text</strong> from variable";
  safeSentence: SafeHtml;
  safeX: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    // Decode escaped HTML entities for the sentence
    const decodedSentence = this.element[0].nlp_matched_sentence
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>');
    
    // Sanitize and mark as safe HTML
    this.safeSentence = this.sanitizer.bypassSecurityTrustHtml(decodedSentence);
    
    // Do the same for variable x
    this.safeX = this.sanitizer.bypassSecurityTrustHtml(this.x);
  }
}

A note on security #

Using [innerHTML] can expose your app to XSS risks if the content comes from an untrusted source. Always make sure you either:

• Control the content being rendered, or
• Use a library like DOMPurify to clean the HTML before rendering it (along with DomSanitizer for Angular compatibility).

Quick alternative for simple cases #

If your HTML is simple and you don't want to use DomSanitizer directly, you could create a custom pipe to decode HTML entities:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'decodeHtml' })
export class DecodeHtmlPipe implements PipeTransform {
  transform(value: string): string {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = value;
    return tempDiv.innerHTML;
  }
}

Then use it in your template like this:

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

Just remember to still sanitize untrusted content!

That should get your bold text rendering correctly now. Let me know if you run into any other issues!

内容的提问来源于stack exchange，提问作者Shafeeq Mohammed