Angular Material Stepper - 在单击视图之前调用 next() 不起作用

Question

我正在构建一个带有 angular 7 和 angular material 的电子应用程序

我有一个 Stepper，它的第二步调用电子 main 以使用户选择一个文件夹来保存应用程序的内容。当它被选中时，它会调用“selectedWorkingFolder”，这会将步骤设置为已完成，并且应该直接使用 (this.stepper.next()) 转到步骤 3，除非我单击窗口上的任意位置，否则这不起作用。

这是一个显示它的gif

https://i.gyazo.com/7e17510822bc7b3946bc6e917e965466.mp4

这是控制器代码

import { Component, OnInit, Input, ChangeDetectorRef, ViewChild } from '@angular/core';
import { ElectronService } from 'src/app/services/electron/electron.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.css']
})

export class MainComponent implements OnInit {

    @ViewChild('stepper') stepper;

    firstFormGroup: FormGroup;
    secondFormGroup: FormGroup;

    isLinear = true;

    constructor(
        private readonly ipcServ: ElectronService,
        private cdRef: ChangeDetectorRef,
        private _formBuilder: FormBuilder,
    ) {
        this.firstFormGroup = this._formBuilder.group({
            firstCtrl: ['', Validators.required]
        });

        this.secondFormGroup = this._formBuilder.group({
            secondCtrl: ['', Validators.required]
        });

        this.ipcServ.on('databaseCheckResult', (event, docs) => {
            console.log(docs);
            this.changeState(docs);
        });

        this.ipcServ.on('selectedWorkingFolder', (event, docs) => {
            this.stepper.selected.completed = true;
            this.stepper.selected.editable = false;
            this.stepper.next();
        });

    }

    ngOnInit() {
        this.ipcServ.send('checkdb');
    }

    changeState(action) {
        if (action === 'unconfigured') {
            this.cdRef.detectChanges();
        } else {

        }
    }

    stepperEvents(event) {
        if (event.selectedIndex === 1) {
            this.ipcServ.send('selectFolder');
        }

    }
}

这是html代码

<mat-vertical-stepper labelPosition="bottom" #stepper (selectionChange)="stepperEvents($event)">
    <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel>Enter your profile name</ng-template>
            <mat-form-field>
                <input matInput placeholder="Profile Name" formControlName="firstCtrl" required>
            </mat-form-field>

            <br>
        </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup">
        <ng-template matStepLabel>Select the working folder</ng-template>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.
    </mat-step>
</mat-vertical-stepper>

另外，我对 angular 还很陌生，所以任何关于如何改进我的代码的提示都会有很大帮助。

谢谢

Answer 1

我想您已修复它，但我认为问题在于您调用了 Angular 之外的全局回调，因此更改检测未运行。要告诉 Angular 你准备好了，把你的代码包装成ngZone.run()

constructor(private ngZone: NgZone) {...}

this.ipcServ.on('selectedWorkingFolder', (event, docs) => {
  this.ngZone.run(() => {
    this.stepper.selected.completed = true;
    this.stepper.selected.editable = false;
    this.stepper.next();
  });           
});