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

Answer 2

您做错了，每次创建新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

在for循环中使用时，垫子步进器不显示连接线

2 个答案: