Матовый степпер не показывает соединительные линии при использовании в для цикла

Question

Я использую шаговый коврик, который связан с панелью расширения матов, оба генерируются в цикле ngFor в соответствии с размером массива.но проблема в том, что степпер не показывает соединительные линии, он действует только как маркированный список.

<div *ngFor="let currentUserInteraction of currentUserInteractions">

  <mat-vertical-stepper #stepper>
    <mat-step [stepControl]="currentUserInteraction">
      <ng-template matStepLabel>{{currentUserInteraction.name}}</ng- 
             template>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
        </mat-expansion-panel-header>
     </mat-expansion-panel>
        </mat-step>
     </mat-vertical-stepper>

   </div>

, а также способ отображения метки с обеих сторон вертикального степпера.

Answer 1

Вы делаете неправильно, вы создаете каждый раз, когда новый mat-vertical-stepper вам нужно добавить цикл на mat-step, а не на mat-vertical-stepper

html:

<mat-vertical-stepper #stepper [linear]="isLinear">
  <mat-step *ngFor="let currentUserInteraction of currentUserInteractions" [stepControl]="currentUserInteraction.key">
     <ng-template matStepLabel>
         {{currentUserInteraction.name}}
     </ng-template>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
        </mat-expansion-panel-header>
      </mat-expansion-panel>
      </mat-step>
</mat-vertical-stepper>

ts:

currentUserInteractions = [
    {name: 'first', key: 'firstStep'},
    {name: 'second', key: 'secondStep'},
    {name: 'third', key: 'thirdStep'},
    {name: 'fourth', key: 'fourthStep'},
  ];

также проверьте по ссылке https://stackblitz.com/edit/angular-aajicd?file=src%2Fapp%2Fapp.component.ts

Answer 2

Вы создаете несколько степперов!Вам просто нужно создать шаг для каждого из ваших текущих взаимодействий с пользователем.Попробуйте это:

<mat-vertical-stepper #stepper>
   <mat-step *ngFor="let currentUserInteraction of currentUserInteractions" [stepControl]="currentUserInteraction">
      <ng-template matStepLabel>{{currentUserInteraction.name}}</ng-template>
      <mat-expansion-panel>
         <mat-expansion-panel-header>
         </mat-expansion-panel-header>
      </mat-expansion-panel>
   </mat-step>
</mat-vertical-stepper>