Angular Material Stepper - Вызов next () не работает, пока я не нажму на вид

Question

Я создаю электронное приложение с угловым 7 и угловым материалом

У меня есть степпер, на 2-м шаге которого выполняется обращение к электронному основному, чтобы пользователь выбирал папку, в которую будут сохраняться материалы приложения.Когда он выбран, он вызывает 'selectedWorkingFolder', который устанавливает шаг как завершенный, и должен перейти непосредственно к шагу 3 с помощью (this.stepper.next ()), это не будет работать, если я не щелкну где-нибудь в окне.

Вот рисунок, показывающий его

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();
  });           
});