问题标签 [mat-stepper]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
777 浏览

javascript - 子组件在初始化之前等待父组件 ngOnInit 异步操作

mat-stepper用于实施客户入职流程。所有 5 个人child mat-stepper component都在一个parent组件内。

我必须save and proceed为每个子组件提供数据。在component和myapplicationID之后生成,子组件必须基于.save and proceedfirst childsecondthirdfourthfirstapplicationID

更复杂的是,每当用户保存信息时,都必须像生成的一样存储draftapplicationID完全不同的路线)。然后用户可以单击applicationID,所有相同的信息都必须被获取,然后用户可以编辑上一个和下一个组件的信息。

对于正常的保存和继续,我存储并获取所有子组件中的所有信息applicationIDbehaviour subject

即使我在同级组件中有可用的信息,它是否会触发多个调用,这是正确的做法吗?

对于编辑场景,我将客户信息传递@Input给所有子组件。这里的问题是在解决该值child ngOnInit之前被触发。因此总是未能通过条件检查。parent ngOnInit@Input

解决它的最佳方法是什么?谢谢你的时间!!!

0 投票
1 回答
675 浏览

angular - 如何为步进器上的每一步加载一个动态组件

我的问题是我必须在模板上步进器的每一步上动态加载数组的一个组件。

我按照 Angular 指南将动态组件加载到模板中,但现在我只能将数组中的所有组件渲染到步进器的第一步,就像其他步骤没有锚元素一样,或者我无法定位该锚元素。

我制作了一个非功能性的 Stackblitz 来展示我需要实现的目标。关于如何做的任何线索?

https://stackblitz.com/edit/angular-1hulxp

0 投票
1 回答
1450 浏览

angular - 禁用 Angular Meterial Stepper 组件的“波纹”效果(单击选项卡时)

我有一个使用 Angular Material Stepper 组件的应用程序。

<mat-horizontal-stepper>

如何在没有 CSS-hacks 的情况下禁用逐步点击选项卡上的“涟漪”行为?

谢谢!

0 投票
1 回答
12154 浏览

angular - 在角度 6 中禁用 mat-stepper 上先前完成的步骤

我正在使用 Angular 材料在 Angular 6 中开发一个项目,并且在一个特定的路线中,我有一个垫子步进器,其中配置了 6 个步骤isLinear=true,因此用户在完成实际步骤之前无法进入下一步,依此类推。

但是当谈到第 5 步时,是否有一个带有某些操作的按钮,并且在用户单击该按钮后,我想防止用户保留并更改先前完成的数据。

我已经禁用了后退按钮,但用户可以通过单击步进器顶部显示的步骤标题返回到任何先前完成的步骤。

0 投票
3 回答
28075 浏览

angular - Angular Material Stepper 组件阻止进入所有未访问的步骤

我正在使用Angular Material Stepper组件。

在我的内容中,我有单独的按钮,可以帮助用户在当前步骤中的任务完成后进入下一步。

我想通过单击步进器组件的步骤按钮来防止用户访问后续步骤。

但是,我希望用户能够通过步进器组件的步进按钮返回上一步。

我没有在步进器内使用表单。我已经看到了组件的 Linear 属性,但它不符合我的要求。

简而言之,通过单击步进器组件的步骤按钮,防止用户进入“未访问”步骤。

0 投票
2 回答
2483 浏览

javascript - Angular material Stepper中每个步骤的浏览器后退和前进按钮

我有一个加载子组件的步进器。

我希望用户能够在他们想要后退或前进一步时按下浏览器的后退和前进按钮。

我的猜测是使用该Location服务@angular/common并将其存储在历史记录中。

这有效,但我在控制台日志中收到错误

错误:未捕获(承诺):错误:无法匹配任何路由。URL 段:'服务/车辆/'

这是因为没有路由,它是装饰性的,仅用于按下浏览器后退按钮的目的。

  1. 我可以在不解析 URL 检查我使用的参数的情况下拥有这样的功能吗?我的猜测是你会的。

  2. 前进按钮不起作用,原因与我收到后退按钮错误的原因相同。我开始认为他们获得转发​​的唯一方法是将路径作为查询参数。这是真的?

  3. 我可以以某种方式停止前进按钮或将其重定向到其他地方吗?

事实上,我想要的只是让后退按钮或前进按钮不会离开该车辆组件。

0 投票
1 回答
689 浏览

radio-button - 角度材料 7:无法使用键盘正确选择组件内的单选按钮

我正在使用 Ionic 4/Angular 7/Angular Material 7 开发应用程序。

在屏幕上有一个步进器。

每个步进器内部都有复杂的形式。鉴于它的复杂性,我将这个表单放在组件中。

在第二步里面有一个广播组。当我打开第二步时,我可以使用键盘将焦点设置在收音机上,但无法选择单选按钮。单选按钮周围有一个灰色圆圈,但不是选择的颜色。

第一步还有一个无线电组,在初始状态下,我可以使用键盘选择它。但是,如果我打开第二步并再次打开第一步,则单选按钮也无法选择。

我已经模拟了步进器内部没有组件的情况,但我无法以这种方式重现问题。然后我推断问题是由该步骤打开后的步骤内部的组件引起的。

如何才能正确选择步骤内的单选按钮?

0 投票
0 回答
879 浏览

angular - 角材料 - 垫子步进

获取 'expressionchangedafterithasbeencheckederror: 表达式在检查后已更改。以前的值:'stepcontrol:未定义'。当前值:'stepcontrol: [object object]' 在我使用子组件的表单引用作为 stepcontrol 值的行中。

这个有什么解决办法吗?

堆栈闪电链接

试图根据屏幕分辨率显示水平和垂直步进器。由于此错误,在更改分辨率时它不会移动到最后一步。

0 投票
0 回答
106 浏览

angular - 而不是 icon ,文本在 Angular6 中以 mat-step 形式出现

我正在尝试实现 Angular Material 的步进器。我只是在遵循“ https://stackblitz.com/angular/maxbjapeayr?file=app%2Fstepper-states-example.ts ”这个和做。但是为什么我在这里看不到图标。如果我想添加自定义图标,如何在此处添加。请在这里帮助我,因为我没有得到任何适当的解决方案。在此处输入图像描述

0 投票
3 回答
3004 浏览

css - 如何将 mat-h​​orizo​​ntal-stepper 保持在页面中心

在此处输入图像描述我正在使用 Angular 6 mat-h​​orizo​​ntal-stepper。我想给它一些特定的宽度,并希望将它保持在页面的中心。对于 mat-h​​orizo​​ntal-content-container 我可以将其保持在中心

但是如何将标题保持在页面中心。我正在尝试这个,但它不起作用。

谁能帮我解决这个问题。