Angular中ngx-datatable行详情内\n换行不生效问题求助

Hey Julian, I totally get why this is confusing—your console shows the correct line breaks, but the browser just squashes everything together. Let's break down why this happens and how to fix it quickly.

Why the Newlines Aren't Showing Up #

Browsers treat plain text newlines (\n) as just another whitespace character. When rendering HTML, they collapse all consecutive whitespaces (including newlines) into a single space. That's why your console output looks perfect (it's a plain text environment) but the page doesn't respect those line breaks.

Solution 1: Use HTML <br> Tags Instead of \n #

Instead of adding \n to your string, replace them with HTML line break tags. Then, use Angular's [innerHTML] binding to render the HTML (since regular interpolation {{ }} will escape the tags).

Update your DetailDisplayer method to use <br>:

DetailDisplayer(row): string { 
  let resultAsString = ""; 
  console.log(row.metadata.questions.length); 
  
  if (row.metadata.questions.length !== 0) {
    resultAsString += `Questions : ${row.metadata.questions.join("<br>")}<br>`;
  } else {
    resultAsString += "Questions : No questions<br>";
  }
  
  if (row.metadata.startDate) {
    resultAsString += `Start date : ${row.metadata.startDate}<br>`;
  } else {
    resultAsString += "Start date : No date<br>";
  }
  
  if (row.metadata.endDate) {
    resultAsString += `End date : ${row.metadata.endDate}<br>`;
  } else {
    resultAsString += "Date de fin : Aucune date<br>";
  }
  
  console.log(resultAsString); 
  return resultAsString; 
}

Then modify your HTML to use [innerHTML]:

<div [innerHTML]="DetailDisplayer(row)"></div>

Solution 2: Use CSS to Preserve Line Breaks #

If you don't want to change your TypeScript code, you can use CSS to tell the browser to respect the \n characters. Add the white-space: pre-line style to your detail div—this will preserve line breaks while still collapsing extra whitespace (which is usually what you want).

Update your HTML:

<div style="padding-left:35px;">
  <div><strong>DETAILS</strong></div>
  <div style="white-space: pre-line;">{{ DetailDisplayer(row) }}</div>
</div>

This works because pre-line tells the browser to:

• Collapse multiple spaces into one
• Break lines at newlines and where necessary to fit the container

Either of these solutions should fix your line break issue. I'd recommend the CSS approach if you want to keep your TS logic focused on data rather than HTML formatting.

内容的提问来源于stack exchange，提问作者Julian Dns