角JSON对象分解成新行不起作用

Question

我正在创建自定义表配置，我需要将一些冗长的标头名称分解为新行，我尝试了'\n'和<br>，但对我而言不起作用。

app.component.ts

columnDefs = [
      {headerName: 'Make <br> Production', field: 'make', edit:true },
      {headerName: 'Model/\n\nLatest Model', field: 'model', dropdown: true },
      {headerName: 'Price', field: 'price', edit:true}
  ];

app.component.html

<tr style="background:#f5f5;">
    <ng-container *ngFor="let item of columnDefs" >
      <td>{{ item.headerName }}</td>
    </ng-container>
  </tr>

对此有何解决方法？

Slackblitz

Answer 1

您可以使用[innerHTML]属性绑定来解释HTML <br>标签。

<ng-container *ngFor="let item of columnDefs" >
  <td [innerHTML]="item.headerName"></td>
</ng-container>

但是，通常最好将格式化逻辑与数据分开。因此，最好使用CSS设置列宽并使行自动换行。

Answer 2

将HTML标签放入模型数据中是一个坏主意。

请使用CSS进行换行。您可以为表格单元格提供最大宽度，必要时浏览器会将其分成多行。