angular - Prikaži više gumb u ngFor u angular2

Imam popis od preko 50 stavki. Želio bih prikazati samo prvih 10 stavki, i želio bih imati gumb koji, kad se klikne, pokaže sljedećih 10 stavki, a kad se ponovno klikne, sljedećih 10 stavki dok se sve ne prikaže.

<ul class="results-main-content">
  <li class="right-results-section">
    <ul class="_result-list">
      <li class="result" *ngFor="let searchResult of searchResults">
        {{searchResult.name}}
      </li>
    </ul>
  </li>
  <li class="showmore">
    <button class="show-more">
      <img class="more" src="_arrow-down.svg" alt="" />
    </button>
  </li>
</ul>

Je li ovo moguće postići u Angular2?

Ako je tako, molim te prosvijetli mene i zajednicu SO-a.

Hvala

Odgovor #1

Možete koristiti slice pipe:

show = 5;

<li *ngFor="let searchResult of searchResults|slice:0:show let i=index">
  {{searchResult.name}}
  <button *ngIf="i==4 && show == 5" (click)="show = searchResults.length">More</button>
</li>

Plunker primjer

Vidi također

• Kako prikazati 1 element u ngFor u angular2?

Odgovor #2

Promjenom koda Güntera Zöchbauera to možete postići gledajući ovaj primjer

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
<ul>  
 <li *ngFor="let tag of tags | slice:0:show; let i=index">
  <a href="#" class="span-tag tag">{{ tag }}</a>
 </li>
<div *ngIf="show < tags.length" (click)="increaseShow()">DropDown Button</div>
</ul>
`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  show = 10;
  tags = ['a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j','a','b','c','d','e','f','g','h','i','j', 'a','b','c','d','e','f','g','h','i','j'];

  increaseShow() {
   this.show += 10; 
 }
}

primjer stackblitz