Question

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

在我的组件中，我为selectedActivityIndex添加了Input（），如果我在nb-stepper中设置了该值，它将更新ngOnInit()。但是后来，在获得了新的活动列表之后，我似乎无法将新的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

对于后代，最终归结为使用可观察对象的时机。我最初的问题是，我向客户推送了一个新列表，其中包含应选择哪个项目的地图。这将导致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>

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

1 个答案: