如何在 ngx-admin 星雲步進器中以編程方式將一個步驟導航到另一個步驟？

Question

我正在使用ngx-admin模板。 我在星雲步進器中遇到了一些問題。 我在一個組件中使用了四個步驟。

我在組件文件中使用了 Nebular API 的方法：

@ViewChild("stepper") stepper: NbStepperComponent;

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

next()導航到后續步驟。
previous()導航到前面的步驟。
reset()導航到第一步並重置所有表單數據。

如何從第 4 步導航到第 2 步？

Answer 1

使用這種方式，

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

Answer 2

this.stepper.goto(2);

它將導航到第二步...