Question

我的代码：

add-new-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>&larr;</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>&rarr;</button>
    </footer>
</section>

add-new-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分配越界值”。

我尝试了数字方式，但屏幕空白。我尝试单击该按钮，但仍然无济于事。

此外，即使是那个super（），我也遇到了错误。它给出了“预期的2-4个参数，但有0个”。

我不知道，我在哪里弄错了。有人可以帮我解决此问题。

角度cdk步进器无法实现

0 个答案: