在Angular中使用nbStepper（结合nebular 组件 Stepper）时，每个stepper都是来自数据库的资料，有个column控制每个stepper是否完成，如果某个stepper未完成，则nbStepperNext动态地显示当前所在的step，如何实现代码

在Angular中使用`nbStepper`组件，当你从数据库获取数据并需要根据某个列（比如完成状态）动态控制步骤导航时，可以按照以下步骤来实现：

1. **设置步进器结构**：
首先，在模板中创建一个`nb-stepper`元素，并使用ngFor循环遍历数据库获取的数据。假设你的数据模型有`id`、`title`和`isCompleted`属性：

<nb_stepper [(activeId)]="currentStep" #stepper>
  <nb_step *ngFor="let step of steps; let i = index">
    <nb_step-header [disabled]="!step.isCompleted">{{ step.title }}</nb_step-header>
    <!-- 步骤内容 -->
    <nb_step-content>
      <!-- 根据step.isCompleted渲染不同的内容 -->
      <ng-container *ngIf="step.isCompleted; else incompleteStepContent">
        ...已完成内容...
      </ng-container>
      <ng-template #incompleteStepContent>
        ...未完成内容...
      </ng-template>
    </nb_step-content>
    <nb_step-action>
      <button nbButton
        [disabled]="step.isCompleted || !stepper.isActive(i)"
        (click)="onStepNext(i)">
        下一步
      </button>
    </nb_step-action>
  </nb_step>
</nb_stepper>

2. **绑定和交互**：
- `[(activeId)]`用于跟踪当前激活的步骤，`#stepper`用于 ViewChild。
- `(click)="onStepNext(i)"`：当按钮被点击时，调用自定义函数`onStepNext(index)`。

3. **控制器函数**：
在组件的.ts文件里，编写`onStepNext`方法来处理下一步的逻辑：

import { Component, OnInit, ViewChild } from '@angular/core';
import { StepDataModel } from './your-data-model'; // 假设你有一个StepDataModel类

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponentComponent implements OnInit {
  currentStep: string;
  @ViewChild('stepper', { static: false }) stepper: any;
  steps: StepDataModel[] = []; // 获取数据库数据并赋值给steps

  ngOnInit(): void {
    // 初始化其他设置
  }

  onStepNext(index: number) {
    if (!this.steps[index].isCompleted) {
      this.stepper.goTo(index + 1);
    }
  }
}