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>

我认为没有必要解释正在发生的事情。

ngFor 中的条件切片管

Conditional slicepipe in ngFor

angular

angular5