如何以编程方式在 Nebular nb-stepper 中设置选定索引？答案

【问题标题】：How to programmatically set selected index in Nebular nb-stepper?如何以编程方式在 Nebular nb-stepper 中设置选定索引？
【发布时间】：2019-10-10 00:40:04
【问题描述】：

我正在试验nb-stepper 组件，并想在我的角度组件中设置selectedIndex。在刷新我的活动后在[(selectedIndex)] 上指定双向绑定时，nb-step 不会更新以显示所选步骤。

在我的组件中，我为 selectedActivityIndex 添加了一个 Input()，如果我在 ngOnInit() 中设置此值，它会更新 nb-stepper。但后来，在得到新的活动列表后，我似乎无法通知步进器新的selectedIndex。

activities.html

<nb-stepper orientation="vertical" disableStepNavigation="true" [(selectedIndex)]="selectedActivityIndex">
    <nb-step *ngFor="let activity of activities" 
        [label]="activity.name" 
        [completed]="activity.completed"
        ></nb-step>
</nb-stepper>

activities.component.ts

export class ActivitiesComponent {

    private _selectedActivityIndex: number;
    @Output() onSelectedActivityIndexChange = new EventEmitter();

    @Input()
    get selectedActivityIndex() {
      return this._selectedActivityIndex;
    }

    set selectedActivityIndex(val) {
      this._selectedActivityIndex = val;
      this.onSelectedActivityIndexChange.emit(this.selectedActivityIndex);
    }

    constructor(private activitiesService: ActivitiesService) { 
      this.activities = []
    }

    ngOnInit() {
      this.selectedActivityIndex = 0

      this.activitiesService.getActivities()
        .subscribe(data => { 
          if(data['statusCode'] == 200) {
            this.activities = data['activities'];
            this.selectedActivityIndex = this.activities.map(m => { return m.selected; }).indexOf(true, 0) 
        }
        else
          console.log('Failure to get activities: ' + data['statusCode'])
    });
    }

我希望 selectedIndex 更新为服务返回的 JSON 响应中指定的值，实际上即使在订阅中设置 this.selectedActivityIndex = 1 也不起作用。

【问题讨论】：

标签： angular stepper ngx-admin nebular

【解决方案1】：

对于后代来说，这最终归结为使用 observable 的时机。我最初的问题是我向客户端推送了一个新列表，其中包含应该选择哪个项目的地图。这会导致 nb-stepper 重新绑定，并且过早设置 selectedActivityIndex。相反，我将组件初始化一次，然后在绑定之后，继续设置索引。

  private getActivities() {
    if (this.selectedFailoverGroup && this.selectedTargetRegion) {
      this.activitiesService.getActivities(this.selectedFailoverGroup)
        .subscribe((d1, t1 = this) => {
          if(d1['statusCode'] == 200) {
            console.log('FailoverComponent.getActivities - data: %s', JSON.stringify(d1));
            t1.activities = d1['activities'];
            t1.activitiesService.getCompletedActivities(t1.selectedFailoverGroup)
              .subscribe((d2) => {
                console.log('FailoverComponent.getCompletedActivities - data: %s', JSON.stringify(d2));
                for (let a of t1.activities) {
                  a.completed = (d2['activities'].map(b => { return b.name == a.name }).indexOf(true, 0) > -1 );
                }
              });
          }
          else {
            t1.activities = [];
          }
      }, (error) => {
        console.error(error)
      }, () => {
        this.activitiesService.getCurrentActivity(this.selectedFailoverGroup)
          .subscribe((d1, t1 = this) => {
            if(d1['statusCode'] == 200) {
              console.log('FailoverComponent.getCurrentActivity - data: %s', JSON.stringify(d1));
              t1.selectedActivityIndex = t1.activities.map(a => { return a.name == d1['name']}).indexOf(true, 0);
            }
            else {
              t1.activities = [];
            }
          })
      });
    } else {
      this.activities = [];
    }
  }

      this._hubConnection.on("notifyErrorActivity", (errorActivity: string, t1 = this) => {
        console.log('FailoverComponent.completedActivities - message: %s', JSON.stringify(errorActivity))
        if (errorActivity != null) {
          t1.selectedAcitivtyStyle = { 'background-color': '#FF4C6A' }
        }
      });

            <nb-stepper
              orientation="vertical"
              disableStepNavigation="true"
              [(selectedIndex)]="selectedActivityIndex"
              style="min-height: 800px;"
              >
              <nb-step *ngFor="let activity of activities"
                [completed]="activity.completed"
                [label]="activity.name"
                >
              </nb-step>
            </nb-stepper>

【讨论】：