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

时间:2018-12-06 12:26:17

标签: angular angular-material

我正在用角7和角材料构建电子应用

我有一个步进器,第二步调用电子主电源,以使用户选择一个将保存应用程序材料的文件夹。 选中后,它将调用“ selectedWorkingFolder”,该操作将步骤设置为已完成,并且应直接使用(this.stepper.next())转到步骤3,除非我在窗口中的任何位置单击,否则此操作将无效。

这是显示它的gif

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

这是控制器代码

antInclude

这是html代码

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

    }
}

此外,我对angular还是很陌生,因此任何有关改进代码的技巧都将大有帮助。

谢谢

1 个答案:

答案 0 :(得分:1)

我想您已修复它,但我认为问题是您调用了Angular之外的全局回调,因此更改检测未运行。要告诉Angular已经准备好,请将代码包装到foreach($_POST['boxes'] as $selected_course){ echo "You have selected: " . $selected_course . "</br>"; }

ngZone.run()