时间戳

首页 > 解决方案 > 材料步进器选择的索引无法正常工作

javascript - 材料步进器选择的索引无法正常工作

问题描述

您好，我目前正在研究Mat-Stepper。嗯，实际上他们两个。你看我有这个组件，它包含两个像这样的 ng 模板：

推到顶部的问题：为什么我选择的索引不起作用是我想念的东西。我知道在步进器上你可以定义[selectedIndex]="condition"，但我认为我看到它在其他方面工作。帮助表示赞赏

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

垂直步进：

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

水平步进：

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

对于变量小屏幕：

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

这些是我的观点

export class GuidedSearchComponent implements OnInit, AfterViewInit {

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

标签： javascriptangulartypescriptangular-material

解决方案

我解决了，你可以试试。


<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);
    })
  );

和堆栈闪电战

推荐阅读