[英]different component for each angular material stepper step via *ngFor
我無法弄清楚如何遍歷步進器的步驟列表並使用*ngFor
為每個步驟使用不同的組件。
我目前正在這樣做:
<mat-horizontal-stepper
[linear]="true"
[labelPosition]="labelPosition"
(selectionChange)="onSelectionChange($event)"
[selectedIndex]="currentStep"
#stepper>
<mat-step [completed]="steps[0].completed" [label]="steps[0].label">
<app-my-component-0 [someInput0]="someInput0" (someOutput0)="onSomeOutput0($event)" *ngIf="currentStep === 0"></app-my-component-0>
</mat-step>
<mat-step [completed]="steps[1].completed" [label]="steps[1].label">
<app-my-component-1 [someInput1]="someInput1" (someOutput1)="onSomeOutput1($event)" *ngIf="currentStep === 1"></app-my-component-1>
</mat-step>
<mat-step [completed]="steps[2].completed" [label]="steps[2].label">
<app-my-component-2 [someInput2]="someInput2" (someOutput2)="onSomeOutput2($event)" *ngIf="currentStep === 2"></app-my-component-2>
</mat-step>
</mat-horizontal-stepper>
有沒有更優雅的方式? 我想我需要對ngTemplate
做一些事情,但我不夠熟悉,無法讓它工作。
您可以使用*ngFor
和ngSwitch
實現它,如下所示:
<mat-horizontal-stepper ...>
<mat-step *ngFor=let step of [0,1,2]" [ngSwitch]="step" [completed]="steps[step].completed" [label]="steps[step].label">
<app-my-component-0 *ngSwitchCase="0" [someInput0]="someInput0" (someOutput0)="onSomeOutput0($event)"></app-my-component-0>
<app-my-component-1 *ngSwitchCase="1" [someInput1]="someInput1" (someOutput1)="onSomeOutput1($event)"></app-my-component-1>
<app-my-component-2 *ngSwitchCase="2" [someInput2]="someInput2" (someOutput2)="onSomeOutput2($event)"></app-my-component-2>
</mat-step>
</mat-horizontal-stepper>
有關簡化示例,請參閱此 stackblitz 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.