Материал выбранного степпера не работает должным образом - PullRequest
0 голосов
/ 05 декабря 2018

Здравствуйте, я сейчас работаю над Mat-Stepper .Ну на самом деле два из них.Вы видите, что у меня есть этот компонент, который содержит два ng-шаблона, таких как:

Заданный вопрос к началу: Почему мой выбранный индекс не работает, есть кое-что, что я пропускаю.Я знаю, что на степперах вы можете определить [selectedIndex]="condition", но я думал, что видел, как это работает иначе.Помощь приветствуется

<div *ngIf="!isSmallScreen; then horizontalStepper else verticalStepper"></div>

verticalStepper:

<ng-template #verticalStepper>
 <mat-vertical-stepper [linear]="isLinear"
                    style="z-index: 1; display: inline;"
                    class="container-fluid width-limit">
      <mat-step [completed]="condition1"></matstep>
      <mat-step [completed]="condition2"></matstep>
 </mat-vertical-stepper>
</ng-template>

horizontalStepper:

<ng-template #horizontallStepper>
 <mat-horizontal-stepper [linear]="isLinear"
                     style="z-index: 1; display: inline;"
                     class="container-fluid width-limit">
       <mat-step [completed]="condition1"></matstep>
       <mat-step [completed]="condition2"></matstep>
 </mat-vertical-stepper>
</ng-template>

это функция моего родителя, которая должна обрабатывать выбранный индекс

ngAfterViewInit() {
  if (!conition1) {
    this.move(0);
  } else if (condition1) {
    this.move(1);
  } else if (condition2) {
    this.move(2);
  } 
}

эта функция должна устанавливать индекс, но не работает

move(index: number) {
  if (this.isSmallScreen) {
    this.verticalStepper.selectedIndex = index;
  } else {
    this.horizontalStepper.selectedIndex = index;
  }
}

для переменной smallscreen:

@HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth >= 600) {
      this.isSmallScreen = false;
    } else {
      this.isSmallScreen = true;
    }
  }

это мои viewchilds

export class GuidedSearchComponent implements OnInit, AfterViewInit {

  @ViewChild('verticalStepper') verticalStepper: MatStepper;
  @ViewChild('horizontalStepper') horizontalStepper: MatStepper;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...