javascript - Material Stepper valt index fungerar inte korrekt

Jag arbetar för närvarande på en Mat-Stepper. Egentligen två av dem. Du förstår, jag har denna komponent som innehåller två ng-templates på detta sätt:

Flyttad fråga till toppen: Varför fungerar inte mitt valda index, är det något jag har missat? Jag vet att på stegen kan du definiera [selectedIndex]="condition" men jag trodde att jag såg det fungera på annat sätt. Hjälp uppskattas

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

vertikalStegvis

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

horisontellStegvis

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

detta är funktionen hos min förälder som ska hantera det valda indexet

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

denna funktion borde sätta indexet men fungerar inte

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

för variabeln smallscreen:

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

det här är mina viewchilds

export class GuidedSearchComponent implements OnInit, AfterViewInit {

  @ViewChild('verticalStepper') verticalStepper: MatStepper;
  @ViewChild('horizontalStepper') horizontalStepper: MatStepper;

Svar #1

Jag löste det. Du kan prova.

<mat-vertical-stepper [linear]="true" #stepper [disableRipple]="true">
  <ng-container
    *ngFor="let partnerList of flowTemplates$ | async;let index = index;let last = last;"
  >
    <ng-container *ngIf="last;else others">
      <mat-step
        #step
        [editable]="false"
        [color]="(status === 4 || status === 5)?'accent':'primary'"
        [state]="(status === 4 || status === 5) ? 'fail' : 'number'"
      >
        <ng-template matStepLabel>
          <label>
            {{ status === 4 || status === 5 ? 'refused' : status === 3 ?
            'passed' : partnerList.name}}
          </label>
          <div>{{ partnerList?.date }}</div>
        </ng-template>
      </mat-step>
    </ng-container>
    <ng-template #others>
      <mat-step
        #step
        [color]="(status === 4 || status === 5)?'accent':'primary'"
        [editable]="false"
        [completed]="index<=nextIndex"
        [state]="'number'"
      >
        <ng-template matStepLabel>
          {{index}} {{currentIndex}} {{nextIndex}}
          <label>
            {{ last ? status === 4 || status === 5 ? 'refused' : status === 3 ?
            'passed' : partnerList.name : partnerList.name}}
          </label>
          <div>{{ partnerList?.date }}</div>
        </ng-template>
      </mat-step>
    </ng-template>
  </ng-container>
  <ng-container *ngIf="status===3">
    <ng-template matStepperIcon="number">
      <mat-icon role="img" class="mat-icon mat-icon-no-color" aria-hidden="true"
        >done</mat-icon
      >
    </ng-template>
  </ng-container>
</mat-vertical-stepper>

  @ViewChildren(MatStep) step?: QueryList<MatStep>;
  @ViewChild('stepper') stepper: MatHorizontalStepper;
  status = 3;

  flowTemplates$: Observable<Temp[]> = of(MOCKS).pipe(
    debounceTime(1000),
    tap((res) => {
      setTimeout(() => {
        const index = 4;
        const steps = this.step!.toArray();

        for (let i = 0; i < index - 1; i++) {
          steps[i].completed = true;
          this.stepper?.next();
        }
      }, 100);
    })
  );

Och stackblitzen