Мой код:
добавление нового-component.html
<section class="example-container">
<header>
<h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
</header>
<div>
<cdk-step>
<p>This is any content of "Step 1"</p>
</cdk-step>
<cdk-step>
<p>This is any content of "Step 2"</p>
</cdk-step>
</div>
<footer class="example-step-navigation-bar">
<button class="example-nav-button" cdkStepperPrevious>←</button>
<button class="example-step" *ngFor="let step of steps; let i = index"
[ngClass]="{ 'example-active': selectedIndex === i }" (click)="onClick(i)">
Step {{ i + 1 }}
</button>
<button class="example-nav-button" cdkStepperNext>→</button>
</footer>
</section>
добавления нового-component.ts
import { Component, OnInit } from "@angular/core";
import { MatDialog, MatDialogRef } from "@angular/material/dialog";
import { CdkStepper } from "@angular/cdk/stepper";
@Component({
selector: "add-new",
templateUrl: "./add-new-component.html",
styleUrls: ["./add-new-component.scss"],
providers: [{ provide: CdkStepper, useExisting: AddNewComponent }],
})
export class AddNewComponent extends CdkStepper implements OnInit {
constructor(private dialogRef: MatDialogRef<AddNewQleComponent>) {
super();
}
onClick(index: number): void {
this.selectedIndex = index;
}
closeForm(): void {
this.dialogRef.close();
}
ngOnInit(): void {}
}
Это мой код для реализации cdk stepper. Но я получаю сообщение об ошибке «Ошибка ОШИБКИ: cdkStepper: Невозможно присвоить значение за пределами selectedIndex
».
Я пробовал числовые способы, но мой экран пуст. Я пытался нажать на кнопку, но все равно безрезультатно.
Кроме того, я получаю сообщение об ошибке даже для этого супер (). Он дает «Ожидается 2-4 аргумента, но получено 0».
Я не знаю, где я ошибаюсь. Может кто-нибудь помочь мне решить эту проблему.