angular 5 stepper selectedIndex 不适用于订阅中设置的变量

Posted 2023-02-18

【中文标题】angular 5 stepper selectedIndex 不适用于订阅中设置的变量

【英文标题】：angular 5 stepper selectedIndex not working with variable set in subscribe

【发布时间】：2018-09-07 15:18:03

【问题描述】：

我正在尝试让步进器根据用户离开的位置转到设置的问题。我正在使用 selectedIndex，并将其设置为我从服务器检索到的数字。

html：

  <mat-horizontal-stepper class="my-stepper" [linear]="true" #stepper="matHorizontalStepper" [selectedIndex]="currentQuestion">
    <mat-step *ngFor="let question of currentVideoCount">
      <ng-template matStepLabel>Question question</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

打字稿：

  public currentVideoCount: number[];
  public currentQuestion: number;
ngAfterViewInit() 
    this.programId.subscribe((programId) => 
      this.evalService.getCurrentVideoCount(programId).subscribe(data => 
        this.currentVideoCount = data.videoCount;
        this.currentQuestion = data.question;
      );
    )
  

这不起作用。如果我这样做，我会收到此错误。

ERROR Error: cdkStepper: Cannot assign out-of-bounds value to `selectedIndex`.

但是，如果我只是将 html 更改为不使用 currentQuestion，而只使用一个数字或我定义为 1、2 等的变量，它确实有效。如果我只是将 currentQuestion 放在 html 标记中，它会给我正确的数字。如果我在任何地方记录它，它会给我正确的号码。但是步进器本身不会使用数字，只有以这种方式给它数字。如何让它为 selectedIndex 使用 currentQuestion？我认为它出了问题，因为我在订阅中定义它的方式，但我不知道如何解决这个问题。

编辑：如果我将 currentQuestion 初始化为我期望 data.question 的数字，它会起作用，但如果我将它初始化为其他东西则不会。显然不是我想要的，但仍然很有趣。

编辑：如果我将 selectedIndex 默认设置为超出范围，例如 3 个项目的数组中的 300 个，我不会收到超出范围的错误，它只会使整个步进器变灰。

【参考方案1】：

我想出的解决方案是将步进器放入带有 *ngIf 的 div 中，并在设置完所有数据后在 subscribe 中显示 div。

HTML：

  <div *ngIf="!processing">
    <mat-horizontal-stepper class="my-stepper" [linear]="true" #stepper="matHorizontalStepper" [selectedIndex]="currentQuestion">
      <mat-step *ngFor="let question of currentVideoCount">
        <ng-template matStepLabel>Question question</ng-template>
      </mat-step>
    </mat-horizontal-stepper>
  </div>

打字稿：

  public currentVideoCount: number[];
  public currentQuestion: number;
  public processing = true;
  ngOnInit() 
    this.loadNextVideo();
    this.programId.subscribe((programId) => 
      this.evalService.getCurrentVideoCount(programId).subscribe(data => 
        this.currentVideoCount = data.videoCount;
        this.currentQuestion = data.question;
        this.processing = false;
      );
    )
  

它很丑，但它有效。如果有人提出更好的答案，请在此处发布。

【讨论】：

我从@Input() 获取我的步进数据，但使用您的解决方案仍然得到这个该死的索引超出范围错误。我被难住了。

【参考方案2】：

您提出的解决方案完全有效，另一种选择是在开始时初始化currentQuestion的值，这样当我们仍在等待订阅时就不会未定义

public currentVideoCount: number[];
public currentQuestion: number = 0; // Initialise currentQuestion
ngAfterViewInit() 
    this.programId.subscribe((programId) => 
      this.evalService.getCurrentVideoCount(programId).subscribe(data => 
        this.currentVideoCount = data.videoCount;
        this.currentQuestion = data.question;
      );
    )
  

【讨论】：

我确实尝试过这个，但它永远不会更改为订阅中的 data.question。如果 data.question 和初始化的数字不同，它会给我同样的错误，或者如果它与 data.question 相同，它就会停留在初始化的数字上。