Question

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

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

因此，我没有完全从DOM中删除步骤，而是决定将[hidden]="!myCondition"放在<mat-step>上。这是行不通的。它永远不会隐藏这些步骤，因为这些步骤从display: block;

继承了<mat-vertical-stepper>

有没有办法在不完全隐藏整个步进器的情况下覆盖此行为？还是有另一种方法可以做到这一点？

Answer 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
}

像我说的那样，

在这种情况下，您必须使用这种方式对其进行硬编码，您可以处理所有要删除或添加的步骤。

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

1 个答案: