неправильный значок в материале угловой степпер - PullRequest
Новая
       5

неправильный значок в материале угловой степпер

0 голосов
/ 10 ноября 2018

Я пытаюсь поставить иконку редактирования, когда состояние «адрес», но иконка является обязательной для первого состояния (home).

Я пытаюсь:

Первый шаг: 

<ng-template matStepperIcon="edit">
            <mat-icon>home</mat-icon>
          </ng-template>

          <mat-step label="Antes de começar..." state="home">
..........

Второй шаг: 

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

Это показывает:

enter image description here

Второй шаг должен быть значком редактирования, но иметь значок первого шага, почему?

1 Ответ

0 голосов
/ 10 ноября 2018

Вы должны переопределить значок home, замените matStepperIcon="address" на следующее. 

<ng-template matStepperIcon="home">
    <mat-icon>edit</mat-icon>
</ng-template>

Редакция

Вам нужно будет контролировать переопределение значка по состоянию, просмотрите состояния phone и chat в приведенном ниже примере стекаблика материала.

https://stackblitz.com/angular/onvqbjrynkj?file=app%2Fstepper-states-example.html

Редакция 2

Вы также можете использовать * 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>
...