जब लूप के लिए उपयोग किया जाता है तो मैट स्टेपर कनेक्टिंग लाइन नहीं दिखाता है

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>

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

angular typescript angular-material

0

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

Answer 1

आप गलत कर रहे हैं आप हर बार नया बना रहे हैं 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

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>

1

Martín 28 जिंदा 2019, 17:30

जब लूप के लिए उपयोग किया जाता है तो मैट स्टेपर कनेक्टिंग लाइन नहीं दिखाता है

2 जवाब

संबंधित सवाल

नए सवाल

angular