Как программно установить выбранный индекс в Nebular nb-stepper? - PullRequest
Новая
       26

Как программно установить выбранный индекс в Nebular nb-stepper?

0 голосов
/ 23 мая 2019

Я экспериментирую с компонентом nb-stepper и хотел бы установить selectedIndex в моем угловом компоненте.При указании двустороннего связывания для [(selectedIndex)] после обновления моих действий, nb-шаг не обновляется, чтобы показать выбранный шаг.

В моем компоненте я добавил Input () для selectedActivityIndex, который обновляетnb-stepper, если я установлю это значение в ngOnInit().Но позже, после получения нового списка действий, я, кажется, не могу сообщить степперу о новом selectedIndex.

activity.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>

actions.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 вподписка не работает.

1 Ответ

0 голосов
/ 15 июня 2019

Для потомков, в конечном счете, все сводилось к времени при использовании наблюдаемого.Моя первоначальная проблема заключалась в том, что я отправил клиенту новый список с картой, какой элемент должен быть выбран.Это приводит к повторной привязке 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>
...