मैं मैट स्टेपर का उपयोग कर रहा हूं जो मैट विस्तार पैनल से जुड़ा हुआ है, दोनों सरणी के आकार के अनुसार 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>

और साथ ही, लंबवत स्टेपर के दोनों किनारों पर लेबल कैसे प्रदर्शित करें।

0
Raza Ellahi 28 जिंदा 2019, 16:34

2 जवाब

सबसे बढ़िया उत्तर

आप गलत कर रहे हैं आप हर बार नया बना रहे हैं mat-vertical-stepper आपको अपना लूप mat-step पर जोड़ने की जरूरत है mat-vertical-stepper पर नहीं

एचटीएमएल:

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

टीएस:

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

1
Abhishek 29 जिंदा 2019, 09:15

आप कई स्टेपर बना रहे हैं! आपको अपने प्रत्येक वर्तमान उपयोगकर्ता इंटरैक्शन के लिए बस एक चरण बनाने की आवश्यकता है। ये कोशिश करें:

<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>
1
Martín 28 जिंदा 2019, 17:30