Условная трубка в ngFor

Question

Как я могу использовать условную трубу в 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_max из ngFor, только когда bucketName.show_max не равно нулю.В противном случае покажите все результаты.

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

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

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