Как программно перейти от одного шага к другому в небулярном степпере ngx-admin?

Я использую небулярный ngx-admin шаблон. Я столкнулся с некоторыми проблемами в небулярном степпере. Я использовал четыре шага в одном компоненте.

Я использовал методы Nebular API в файле компонента:

@ViewChild("stepper") stepper: NbStepperComponent;

this.stepper.next();
this.stepper.previous();
this.stepper.reset();

next() - переход к следующим шагам.
previous() - переход к предыдущим шагам.
reset() - переход к первому шагу и сброс всех данных формы.

Как перейти с 4-го шага на 2-й?


angular ngx-admin nebular
person ragu    schedule 21.12.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Используйте этот способ,

В HTML файле

 <nb-stepper #stepper [(selectedIndex)]="stepperIndex">

    <nb-step [stepControl]="serviceForm" label="Select Package">

    <button nbButton 
    (click)="backToSelectPackage()">ADD</button>

    </nb-step> 

 </nb-stepper>

В файле Component.ts

stepperIndex: number = 0; // here 0 is initial index

backToSelectPackage() {
  this.stepperIndex = 0; // here 0 is navigate index
}

Примечание:

Если используется [(selectedIndex)], мы не можем использовать next (), Previous () и nbStepperNext, nbStepperPrevious.

person Shantanu Sharma    schedule 21.12.2020

arrow_upward
0
arrow_downward 

this.stepper.goto(2);

он перейдет ко второму шагу ...

person Shantanu Sharma    schedule 21.12.2020
comment
в nbstepper нет метода goto - person ragu; 21.12.2020
comment
пожалуйста, обновите ngx-stepper lib RUN: npm update ngx-stepper - person Shantanu Sharma; 21.12.2020
comment
Я использовал степпер nb. почему я обновляю ngx-stepper - person ragu; 21.12.2020
comment
используйте this.stepper.selectedIndex = 2 - person Shantanu Sharma; 21.12.2020