时间戳

首页 > 解决方案 > 如何在文本之间添加水平线

javascript - 如何在文本之间添加水平线

问题描述

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

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

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

标签： javascripthtmlangulartypescriptangular-material

解决方案

您可以将<mat-divider>用于此目的。将 for 循环移动到 anng-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>

示例可以在这里找到

推荐阅读