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

Question

我正在试验 nb-stepper 组件，并想在我的 Angular 组件中设置 selectedIndex。刷新我的事件后在 [(selectedIndex)] 上指定双向绑定(bind)时，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不工作。

Answer 1

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

  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>