Angular Mat Stepper включает только активную навигацию и завершенную навигацию - PullRequest
Новая
       11

Angular Mat Stepper включает только активную навигацию и завершенную навигацию

0 голосов
/ 26 марта 2019

Я сделал примерный проект степперов с Reaction.js и пользовательским интерфейсом материала.Ссылка https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js

Я пытаюсь сделать тот же образец с Angular и материалом, но я не смог достичь той же функциональности, что и реагировать.Кто-нибудь может мне помочь с этим?

Угловая рабочая ссылка: - https://stackblitz.com/edit/stepper-dynamic-gpwp1x?file=src%2Fapp%2Fapp.component.html

Чего я хочу достичь в этом примере: -

  • Шаговые заголовки: -В примере реакции я включаю только текущий заголовок и при выборе, я включаю кнопку добавления элемента.
  • Значки, я не смог удалить значки редактирования.

Спасибо за помощь.

1 Ответ

1 голос
/ 26 марта 2019

Для этого вы можете сделать следующее.

Отключить кнопку добавления:

Добавьте ссылку на шаблон #verticalStepper на свой степпер 

<mat-vertical-stepper #verticalStepper

Добавить ссылку на шаблон #addButton на шаг вашей кнопки 

<mat-step #addButton>

Затем сравните шаг кнопки с выбранным степпером и отключите кнопку, если они не совпадают. 

<button mat-flat-button [disabled]="verticalStepper.selected != addButton" (click)="addItem()">

Используйте [completed] для контроля завершения шага:

Добавьте шаблон ref #step в ваш цикл *ngFor, тогда, если step.completed передаст значение true на вход [completed]. 

<mat-step #step *ngFor="let step of newSteps; let i = index" [completed]="step.completed">

Тогда в вашем (change) наборе событий step.completed = true

(change)="changeStep($event, i); step.completed = true">

Изменить значок редактирования

Добавьте следующее, чтобы заменить значок редактирования на пошаговый указатель. 

<ng-template matStepperIcon="edit" let-index="index">
   {{index + 1}}
 </ng-template>

Stackblitz

https://stackblitz.com/edit/stepper-dynamic-qxh5qf?embed=1&file=src/app/app.component.html

...