Угловой шагер CDK не в состоянии реализовать - PullRequest
0 голосов
/ 03 июля 2019

Мой код:

добавление нового-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>

добавления нового-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».

Я не знаю, где я ошибаюсь. Может кто-нибудь помочь мне решить эту проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...