angular2 ng только если индекс меньше определенного числа

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

<li  *ngFor="let item of items; let i = index;">
     <div *ngIf="i < 4">
       //more stuff ...
     </div>
</li>

Но что это делает? Кажется, он отображает пространство для элементов с индексом = 4.

Если я попробую:

<li  *ngFor="let item of items; let i = index;" *ngIf="i < 4"> //Notice ngIF

Ничего не отображается.

Любые идеи?


angular angular2-directives angular2-template
person CommonSenseCode    schedule 02.09.2016    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Сделать это можно так:

<li *ngFor="let item of items | slice:0:5; let i = index;">
  <div>
    //more stuff ... 
  </div>
</li>

Может быть, это вариант, который вам подходит.

person JRoppert    schedule 02.09.2016
comment
какова здесь функция среза, не могли бы вы объяснить немного подробнее? - person Pardeep Jain; 02.09.2016
comment
slice создает новый массив с подмножеством элементов в 'items' (в этом случае с первыми 5 элементами 'items'). Таким образом, ngFor увидит только этот временный массив из 5 элементов. См. Также документацию по SlicePipe. - person JRoppert; 02.09.2016

arrow_upward
1
arrow_downward

Вы можете использовать ng-template

<ng-template ngFor let-item [ngForOf]="items"  let-i="index" >
        <div *ngIf=" i < 4">
            {{item}}
        </div>
</ng-template>
person LintonB    schedule 20.12.2017