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不为null时，如何才能用代表ngFor的{{1}}的数字来分割输出。否则，显示所有结果。

希望有人可以帮助我解决这个问题。

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中的条件切片管

1 个答案: