4

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

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

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

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

4

1 回答 1

2

在这种情况下，我认为没有办法动态地实现这一点，因为Angular Materialstepper中的组件中没有为此目的的选项，这是 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
}

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

于 2018-11-15T05:45:59.867 回答