Условный slicepipe в ngFor

Как я могу использовать условную трубку в ngFor?

Вот ниже шаблон html:

<div *ngFor = "let bucket of getBucketsWithValues(bucketName.criterium ? bucketName.criterium : bucketName) | orderBy:'key' 
     | slice:0:bucketName.show_max">
    <osi-checkbox [model] = "filter[bucketName.criterium ? bucketName.criterium : bucketName][bucket.key].checked" 
      (change) = "onFilterChange(filter[bucketName.criterium ? bucketName.criterium : bucketName][bucket.key], $event.checked)">

        <osi-li-body class = "osi-black-87">Test {{ bucket.key }}&nbsp;({{ bucket.doc_count }})</osi-li-body>
    </osi-checkbox>
</div>

<div *ngIf = "bucketName.show_max">
  <osi-toggle-show-more-item [openTitle] = "'Show more'" [closeTitle] = "'Show less'" [padding] = "false"></osi-toggle-show-more-item>
</div>

Итак, как я могу нарезать вывод по числу, которое представляет bucketName.show_maxngFor, только если bucketName.show_max не равен нулю. В противном случае покажите все результаты.

Надеюсь, кто-нибудь может помочь мне в этом вопросе ..

да, у него есть свойство show_max, но оно не всегда установлено

— 23.10.2018 15:21

angular angular5

23.10.2018 15:11

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

486

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<div *ngFor = "let bucket of (bucketName.show_max !== null
? (getBucketsWithValues(bucketName.criterium ? bucketName.criterium : bucketName) | orderBy:'key'| slice:0:bucketName.show_max)
: (getBucketsWithValues(bucketName.criterium ? bucketName.criterium : bucketName) | orderBy:'key'))">
    <osi-checkbox [model] = "filter[bucketName.criterium ? bucketName.criterium : bucketName][bucket.key].checked" 
      (change) = "onFilterChange(filter[bucketName.criterium ? bucketName.criterium : bucketName][bucket.key], $event.checked)">

        <osi-li-body class = "osi-black-87">Test {{ bucket.key }}&nbsp;({{ bucket.doc_count }})</osi-li-body>
    </osi-checkbox>
</div>

<div *ngIf = "bucketName.show_max">
  <osi-toggle-show-more-item [openTitle] = "'Show more'" [closeTitle] = "'Show less'" [padding] = "false"></osi-toggle-show-more-item>
</div>

Я думаю, что нет необходимости объяснять происходящее

Я обновил ответ, вам нужно добавить (), потому что символ канала | нарушает синтаксис условия

— 23.10.2018 15:30

23.10.2018 15:20