ng-zorro给步骤条加更多的描述

最简洁的写法：

<nz-steps
  [nzCurrent]="index"
  (nzIndexChange)="onIndexChange($event)"
  [nzProgressDot]="progressTemplate"
>
  <ng-container *ngFor="let item of steps2; let idx = index">
    <nz-step
      [nzTitle]="item.title"
      [nzSubtitle]="item.name"
      [nzDisabled]="item.disabled"
      [nzDescription]="tpl"
    >
    </nz-step>
    <ng-template #tpl>
      <p>{{ item.time }}</p>
      <p>{{ item.mark }}</p>
    </ng-template>
  </ng-container>
</nz-steps>
<ng-template
  #progressTemplate
  let-dot
  let-status="status"
  let-index="index"
>
  <span
    nz-popover
    nzContent="steps {{ index }} status: {{ status }}"
    style="margin-left: -100%;"
  >
    <ng-template [ngTemplateOutlet]="dot"></ng-template>
  </span>
</ng-template>

最终效果：

另一种写法：
利用class自动对齐，另外循环一次

<nz-steps
      [nzCurrent]="index"
      (nzIndexChange)="onIndexChange($event)"
      [nzProgressDot]="progressTemplate"
    >
      <ng-container *ngFor="let item of steps2; let idx = index">
        <nz-step
          [nzTitle]="item.title"
          [nzSubtitle]="item.name"
          [nzDisabled]="item.disabled"
          [nzDescription]="xxx"
        >
        </nz-step> 
      </ng-container>
    </nz-steps>
    <ng-template
      #progressTemplate
      let-dot
      let-status="status"
      let-index="index"
    >
      <span
        nz-popover
        nzContent="steps {{ index }} status: {{ status }}"
        style="margin-left: -100%;"
      >
        <ng-template [ngTemplateOutlet]="dot"></ng-template>
      </span>
    </ng-template>
    <div style="display: flex;">
      <ng-container *ngFor="let item of steps2; let idx = index;">
          <div class="ant-steps-item ant-steps-item-wait">
            <p>{{item.time}}</p> 
           	<p>{{item.mark}}</p>
          </div>
        </ng-container>
    </div>