如何在 Angular 管道输出中添加换行符

Question

如何使用 Angular 管道添加换行符

<th>{{(date | date: 'EEE MMM d')}}</th>

它的输出类似于 Mon Jul 20 - 都在同一行。但我希望它像这样分开：

星期一
七月
20

在同一个单元格中，但在不同的行中。就像添加一个 <br> 标签一样。请检查下图：

Answer 1

<th>
  {{(date | date: 'EEE')}}<br/>
  <strong>{{(date | date: 'MMM')}}</strong><br/>
  {{(date | date: 'd')}}
</th>

Answer 2

您实际上可以尝试实现定义新行的管道。

像这样：

@Pipe({ Name: 'addLine' })
Export class addLinePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
      return value.replace(/(?:\r\n|\r|\n)/g, '<br/>');
  }
}

然后在你的其他管道之间调用它：

<th>
  {{date | date: 'EEE')}}
  {{foo | addLine}}
  {{date | date: 'MMM')}}
  {{foo | addLine}}
  {{date | date: 'd')}}
</th>

Answer 3

我的第一个解决方案也是创建一个管道：

@Pipe({name: 'breakOn'})
export class BreakOnPipe implements PipeTransform {
  transform(value: string, ...args: any[]) {
    return value.replace(/,|;/g, '<br>'); //replace all ',' and ';' with <br>
  }

}

类似于@Davis Jahn 的回答。但这只是在我的 table 中显示了 <br> 而没有实际的换行符。原因是字符串被“转义”了。 解决方案：

<td mat-cell *matCellDef="let row"><span innerHtml="{{ row.value | breakOn }}"></span></td>

<td> 似乎不支持“innerHtml”，但 <span> 支持。

如何在 Angular 管道输出中添加换行符

how to add line break in Angular pipe output

pipe

angular