Здравствуйте, я сейчас работаю над 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;