如何在文本之间添加水平线答案

【问题标题】：how to add horizontal line between text如何在文本之间添加水平线
【发布时间】：2021-02-07 12:31:33
【问题描述】：

现在晚上，我从后端收到了两条文本响应，我想知道如何才能使看起来像下面的设计。我不确定这是否可能，但任何建议或帮助将不胜感激。

如果有两个或多个广播，我只想自动添加一条水平线来分隔文本，而不是像现在这样显示在同一行（图片）。

    <mat-card class="alert" *ngIf="broadcastNotifications?.length">
      <mat-card-title *ngFor="let broadcast of broadcastNotifications">
          <p style="font-size: 15px; color: black; margin-top: 25px;">{{broadcast.message}}</p>
      </mat-card-title>
    </mat-card>

    this.notificationService.getNotification().subscribe((response: any) => {
      if(response && response.length){
        const alerts = response.filter(el => el.notificationType === 2);
        this.broadcastNotifications = response.filter(el => el.notificationType === 1);
        if(alerts.length){
          this.dialog.open(ReleaseDialogComponent, {
            data : {notifications: alerts}
          });
        }
      }
    })

现在的样子与我的想法。

[![在此处输入图片描述][1]][1]

【问题讨论】：

html <hr /> 显示一条水平线，这是一个起点
嗨，你能告诉我我应该放在哪里吗？谢谢

标签： javascript html angular typescript angular-material

【解决方案1】：

您可以为此目的使用<mat-divider>。将 for 循环移动到 ng-container 并为不是最后一个元素的所有元素添加 <mat-divider>。

<mat-card class="alert" *ngIf="broadcastNotifications?.length">
    <ng-container *ngFor="let broadcast of broadcastNotifications; let i = index">
        <mat-card-title>
            <p style="font-size: 15px; color: black; margin-top: 25px;">{{broadcast.message}}</p>
        </mat-card-title>
    <mat-divider *ngIf="broadcastNotifications.length - 1 !== i"></mat-divider>
    </ng-container>
</mat-card>

例子可以在here找到

【讨论】：

你也可以用
替换 mat-divider