Angular material 角度5步进器选择索引不使用订阅中设置的变量

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

Html:

这是行不通的。如果我这样做，我会得到这个错误

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

但是，如果我简单地将html更改为不使用currentQuestion，而只使用一个数字，或者一个我定义为1、2等的变量，它确实可以工作。如果我只是把currentQuestion放在一个html标记中，它会给出正确的数字。如果我把它记录在任何地方，它会给我正确的号码。但是步进器本身不会使用这个数字，而且只有当这个数字是这样给它的时候。如何让它对所选的索引使用currentQuestion？我假设它出错是因为我在订阅中定义它的方式，但我不知道如何修复它

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

---

编辑：如果我在默认情况下将selectedIndex设置为out-bounds，比如3个项目中的300个，我不会得到out-bounds错误，它只会使整个stepper变灰。

我提出的解决方案是将stepper放在一个带有*ngIf的div中，并在所有数据设置完毕后在subscribe中，允许显示div

Html:

---

虽然很难看，但它很管用。如果有人提出了更好的答案，请在这里发布。

您提出的解决方案是完全有效的，另一种选择是在开始时初始化

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相同，它只会停留在初始化的数字上。我从

@Input（）

获取步进数据，但仍然使用您的解决方案得到这个该死的索引越界错误。我被难住了。

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

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

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