Ступеньки углового материала не могут быть скрыты с помощью [скрыто] - PullRequest
Новая
       31

Ступеньки углового материала не могут быть скрыты с помощью [скрыто]

0 голосов
/ 15 ноября 2018

У меня есть компонент углового материала Stepper с фиксированным количеством шагов.Я хочу иметь возможность скрывать шаги в зависимости от того, является ли условие истинным или ложным.

Сначала я попробовал это с помощью директивы *ngif, и она работала очень хорошо, пока я не понял, что удаляет эти шаги изшаговый массив.Это не хорошо, так как мне нужно, чтобы шаговый массив совпадал с массивом в моей серверной логике.

Поэтому вместо полного удаления шагов из DOM я решил просто добавить [hidden]="!myCondition" в <mat-step>.Это не работает.Он никогда не будет скрывать шаги, так как шаги наследуют display: block; от <mat-vertical-stepper>

Есть ли способ перезаписать это поведение без полного скрытия всего степпера?Или есть альтернативный способ сделать это?

1 Ответ

0 голосов
/ 15 ноября 2018

в таком случае я не думаю, что есть способ достичь этого динамически, так как в 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
}

, как я уже говорил, в этом случае вы жестко закодируете его таким образом, что вы сможете выполнить все шаги, чтобы удалить или добавить их.

...