如果某些条件为真,则防止角材料步进器前进

问题描述 投票:1回答:1

我想知道如何跳过Angular Material Stepper中的步骤更改。

我看到的每个“解决方案”都没有用。我还尝试将有关某些条件的步骤设置为editable = false。但这意味着,如果用户触摸了该步骤,则该步骤将无法编辑。用editable = false初始化的步骤可以被编辑:(

如果值等于“停止”,我想跳过步骤更改。

Stackblitz

import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild("stepper") stepper;
  constructor(private router: Router) {
    this.router.navigate(['material']);
  }
  showMaterialPage() {}
}
angular stepper mat-stepper
1个回答
0
投票

尝试创建禁用名称的CSS类

将其写入您的CSS文件withmaterial.component.css

.disabled{
  pointer-events: none !important;
}

并在您的withmaterial.component.html

中写上
<mat-horizontal-stepper [ngClass]="{'disabled':inputValue =='stop'}" [linear]="false" #stepper (selectionChange)="checkValue($event)" >
© www.soinside.com 2019 - 2024. All rights reserved.