angular 5 stepper selectedIndex无法使用订阅

时间:2018-03-28 19:47:12

标签: angular-material angular5

我试图让步进器根据用户离开的位置转到设定的问题。我使用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个,我没有得到越界错误,它只是使整个步进器变灰。

2 个答案:

答案 0 :(得分:0)

我想出的解决方案是将步进器放在带有* ngIf的div中,并在设置了所有数据后的订阅中,允许显示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;
      });
    })
  }

这很难看,但它确实有效。如果有人想出更好的答案,请在此发布。

答案 1 :(得分:0)

您提出的解决方案完全有效,另一种方法是在开始时初始化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;
      });
    })
  }