我想在Angular2 + TypeScript + SCSS + HTML中实现7步进度条，如上图所示。我不知道该怎么办。
我有7个步骤（创建，分配，进行等）和三个不同的路径（所有7个步骤，在3个步骤后被阻止，在初始步骤被拒绝）
我的想法：
我正在为一个网站做准备，因此图标/图像下方的文字应相应调整大小，并且应适用于手机尺寸，尽管此时不需要。角形步进器具有按钮，对我来说有点复杂。我正在已经存在的网站中使用状态变量的内部调用来实现。它将被放置在网站的右上角。
也可以将当前步骤的前两个步骤显示为灰色，并以灰色显示下一步。
如何操作一直令人困惑，我是Angular2 +的新手。
我不久前做了一些类似的事情，但是最终报废了它，所以它不是超级干净。我也只是在写状态名称并给它们涂上不同的颜色，而不是在下面带有标签的图标。我的显示器会在小屏幕上切换到垂直视图。不确定是否会有所帮助，但这是html：
<div
*ngIf="appeal && statuses && statuses.length > 0 && childVisible"
fxLayout="row"
fxLayoutAlign="start center"
fxLayout.lt-md="column"
class="py-24"
>
<ng-container *ngFor="let status of statuses; let last = last; let index = index">
<span [ngClass]="{ 'green-fg': index <= selection,'orange-fg text-bold': index === selection }">{{
status.statusDescription
}}</span>
<mat-divider
fxHide.lt-md="true"
fxHide="false"
inset="true"
fxFlex="1 0 15px"
*ngIf="!last"
class="my-0 mx-8"
></mat-divider>
<mat-divider
fxHide.lt-md="false"
fxHide="true"
vertical="true"
inset="true"
fxFlex="1 0 10px"
*ngIf="!last"
class="mx-0 my-4"
></mat-divider>
</ng-container>
</div>