如何在角管输出中增加断线

Question

我怎样才能用有角的管道来加一根线？

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

它的输出就像7月20日一样--都在同一条线上。但我想把它分开，就像：

监视器

7月

20

在同一个细胞里，但在另一条线上。比如添加一个<br>标记。请检查以下图片：

​

​

Answer 1

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

Answer 2

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

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

}

类似于戴维斯·扬的回答。但这只是显示了我的表中的<br>，并且没有实际的行中断。原因是字符串是“转义的”。解决方案：

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

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

Answer 3

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

就像这样：

@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>