Angular Material Stepper 步骤不能用 [hidden] 隐藏

Posted 2023-05-07

【中文标题】Angular Material Stepper 步骤不能用 [hidden] 隐藏

【英文标题】：Angular Material Stepper steps cannot be hidden with [hidden]

【发布时间】：2019-04-18 03:42:03

【问题描述】：

我有一个具有固定步数的 Angular Material Stepper 组件。我希望能够根据条件是真还是假来隐藏步骤。

我首先使用*ngif 指令进行了尝试，它工作得很好，直到我意识到它从步进器数组中删除了这些步骤。这不好，因为我需要步进器数组与后端逻辑中的数组匹配。

因此，我决定在<mat-step> 上添加[hidden]="!myCondition"，而不是完全从DOM 中删除这些步骤。这不起作用。它永远不会隐藏步骤，因为步骤从 <mat-vertical-stepper> 继承 display: block;

有没有办法在不完全隐藏整个 Stepper 的情况下覆盖此行为？或者有没有其他方法可以做到这一点？

【问题讨论】：

您找到好的解决方案了吗？我正在尝试做同样的事情。

@ToddSkelton 不幸的是，我使用的原始方法没有。我的项目的要求发生了变化，所以我只是使用 *ng-if 根据我需要显示的数据动态隐藏这些步骤。我不再需要将步进器与固定的后端阵列相匹配。我最近一直在使用步进器，所以如果可以的话，我很乐意以任何方式提供帮助！

我要求在折叠步骤时显示表单摘要。我仍在尝试找出一个好方法来做到这一点。我尝试使用 ngIf 删除步骤，并使用看起来像折叠步骤但有内容的假步骤。 ngIf 的问题在于它完全删除了该步骤并且索引发生了变化。

@ToddSkelton 您能否在步进器上使用 @Input() editable: boolean 指令，或者用户是否需要能够在某些时候编辑上一步？如果您设置了 StackBlitz 或打开一个包含更多信息的新问题，我很乐意看看。虽然没有保证。我觉得这是当前状态下步进器的一个根本缺陷。另一方面，我让我的步进器像一个树组件一样，我知道这不是它的典型用途。

@ToddSkelton 你找到好的解决方案了吗？

【参考方案1】：

在这种情况下，我认为没有办法动态实现这一点，因为 Angular Material 中的stepper 组件中没有用于此目的的选项，这是 CSS 的唯一方法，但是因为你想控制他们的条件，这不是你的选择。

另一种方法是通过在 TS 中进行硬编码来做到这一点，假设你有三个步骤来看看这个

stepperArr: label: string, body: string[] = [
  label: 'first step',
  body: `<input type="text" placeholder="step1" required>`
,
  label: 'second step',
  body: `<input type="text" placeholder="step2" required>`
,
  label: 'third step',
  body: `<input type="text" placeholder="step3" required>`
];

控制他们

if (true) 
  this.stepperArr.push(
    label: 'new step',
    body: `<input type="text" placeholder="step4">`
  );

if (false) 
  this.stepperArr.splice(index_start, delete_count);  // index_start: the index of item in array, delete_count: how many items to delete

就像我说的那样，在这种情况下，您必须对其进行硬编码，这样您就可以处理删除或添加到它们的所有步骤。