[英]wrong icon in material angular stepper
I'm trying to put a edit icon when a state is "address", but the icon is the must of the first state (home).当状态为“地址”时,我试图放置一个编辑图标,但该图标是第一个状态(家)的必需品。
I try:我尝试:
First step:第一步:
<ng-template matStepperIcon="edit">
<mat-icon>home</mat-icon>
</ng-template>
<mat-step label="Antes de começar..." state="home">
..........
Second step:第二步:
<ng-template matStepperIcon="address">
<mat-icon>edit</mat-icon>
</ng-template>
<mat-step label="Dados do seu pet..." [stepControl]="secondFormGroup" state="address">
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
This is showing:这显示:
The second step must be a edit icon but have the icon of the first step why?第二步必须是一个编辑图标但是有第一步的图标为什么?
You should be overriding the home
icon, change matStepperIcon="address"
to the following.您应该覆盖
home
图标,将matStepperIcon="address"
更改为以下内容。
<ng-template matStepperIcon="home">
<mat-icon>edit</mat-icon>
</ng-template>
Revision修订
You will need to control the icon override by state, please review the phone
and chat
states in the below material stackblitz example.您将需要按状态控制图标覆盖,请查看以下材料 stackblitz 示例中的
phone
和chat
状态。
https://stackblitz.com/angular/onvqbjrynkj?file=app%2Fstepper-states-example.html https://stackblitz.com/angular/onvqbjrynkj?file=app%2Fstepper-states-example.html
Revision 2修订版 2
You could also use *ngIf based on index.您还可以根据索引使用 *ngIf。
<ng-template matStepperIcon="edit" let-index="index">
<mat-icon *ngIf="index == 0">home</mat-icon>
<mat-icon *ngIf="index == 1">edit</mat-icon>
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.