Nebular stepper NbStepper selectedIndex不起作用可能与Angular Lifecycle相关

如何解决Nebular stepper NbStepper selectedIndex不起作用可能与Angular Lifecycle相关

创建后，我无法设置Nebular Stepper的selectedIndex。 当我单击按钮时，我从模板中看到变量已更新，但步进器未更改。

我认为问题在于步进器位于模态内部，因此我在StackBlitz（example）上构建了MWE，但是在这里可行！也许问题是从http get JSON获取选项卡的内容。

我尝试使用setTimeOut，zone.run（），ChangeDetectorRef等。但是选项卡从未更改（事件从未触发过？）。如何以编程方式设置可见标签？

基于一个条件，我需要设置第二步或第三步，一种解决方法是在需要时隐藏第二步，但是在这种情况下，问题是nbStepperNext不考虑是否隐藏了一步（{ 3}}）

这里是我的package.json：

  "name": "ngx-admin","version": "6.0.0","license": "MIT","repository": {
    "type": "git","url": "git+https://github.com/akveo/ngx-admin.git"
  },"bugs": {
    "url": "https://github.com/akveo/ngx-admin/issues"
  },"scripts": {
    "ng": "ng","conventional-changelog": "conventional-changelog","start": "ng serve","build": "ng build","build:prod": "npm run build -- --prod --aot","test": "ng test","test:coverage": "rimraf coverage && npm run test -- --code-coverage","lint": "ng lint","lint:fix": "ng lint ngx-admin-demo --fix","lint:styles": "stylelint ./src/**/*.scss","lint:ci": "npm run lint && npm run lint:styles","pree2e": "webdriver-manager update --standalone false --gecko false","e2e": "ng e2e","docs": "compodoc -p src/tsconfig.app.json -d docs","docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s","prepush": "npm run lint:ci","release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s","postinstall": "ngcc --properties es2015 es5 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\""
  },"dependencies": {
    "@akveo/ng2-completer": "^9.0.1","@angular/animations": "^10.2.1","@angular/cdk": "^10.2.6","@angular/common": "^10.2.1","@angular/compiler": "^10.2.1","@angular/core": "^10.2.1","@angular/forms": "^10.2.1","@angular/material": "^10.2.6","@angular/platform-browser": "^10.2.1","@angular/platform-browser-dynamic": "^10.2.1","@angular/router": "^10.2.1","@asymmetrik/ngx-leaflet": "3.0.1","@fullcalendar/angular": "^5.3.1","@fullcalendar/daygrid": "^5.3.2","@fullcalendar/interaction": "^5.3.1","@fullcalendar/timegrid": "^5.3.1","@microsoft/signalr": "^3.1.9","@nebular/auth": "^6.2.1","@nebular/eva-icons": "6.2.1","@nebular/security": "^6.2.1","@nebular/theme": "^6.2.1","@ngx-formly/bootstrap": "^5.10.5","@ngx-formly/core": "^5.10.5","@ngx-formly/schematics": "^5.10.5","@swimlane/ngx-charts": "^14.0.0","@types/chart.js": "^2.9.27","angular-datatables": "^9.0.2","angular2-chartjs": "0.4.1","bootstrap": "^4.5.3","chart.js": "^2.9.4","chartjs-plugin-datalabels": "^0.7.0","chartjs-plugin-labels": "^1.1.0","ckeditor": "4.7.3","classlist.js": "1.1.20150312","core-js": "2.5.1","datatables.net": "^1.10.22","datatables.net-dt": "^1.10.22","echarts": "^4.9.0","eva-icons": "^1.1.3","intl": "1.2.5","ionicons": "2.0.1","jquery": "^3.5.1","leaflet": "1.2.0","nebular-icons": "1.1.0","ng2-ckeditor": "^1.2.9","ng2-smart-table": "^1.7.1","ngx-echarts": "^4.2.2","node-sass": "^4.14.1","normalize.css": "6.0.0","pace-js": "1.0.2","roboto-fontface": "0.8.0","rxjs": "6.6.3","rxjs-compat": "6.3.0","socicon": "3.0.5","style-loader": "^1.3.0","tinymce": "4.5.7","tslib": "^2.0.3","typeface-exo": "0.0.22","web-animations-js": "^2.3.2","zone.js": "~0.10.3"
  },"devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0","@angular/cli": "^10.2.0","@angular/compiler-cli": "^10.2.1","@angular/language-service": "10.1.6","@compodoc/compodoc": "^1.1.11","@fortawesome/fontawesome-free": "^5.15.1","@types/d3-color": "1.0.5","@types/datatables.net": "^1.10.19","@types/jasmine": "2.5.54","@types/jasminewd2": "2.0.3","@types/jquery": "^3.5.4","@types/leaflet": "1.2.3","@types/node": "^12.19.3","codelyzer": "^6.0.1","conventional-changelog-cli": "1.3.4","husky": "0.13.3","jasmine-core": "~3.5.0","jasmine-spec-reporter": "~5.0.0","karma": "~5.0.0","karma-chrome-launcher": "~3.1.0","karma-cli": "1.0.1","karma-coverage-istanbul-reporter": "~3.0.2","karma-jasmine": "~3.3.0","karma-jasmine-html-reporter": "^1.5.0","npm-run-all": "4.0.2","protractor": "~7.0.0","rimraf": "2.6.1","stylelint": "7.13.0","ts-node": "3.2.2","tslint": "~6.1.0","tslint-language-service": "^0.9.9","typescript": "3.9.7"
  }
}```

解决方法

一种解决方法是调用以下函数来来回切换 bw 索引。

stepper.next()
stepper.previous()

移动到所需的索引。

例如：就我而言，我必须转到 Index-2

for(let i=0; i< 2;i++) {
    this.stepper.next();
}