Afficher plus de boutons dans ngFor dans angulaire2

Question

J'ai une liste de plus de 50 articles. Je voudrais montrer seulement les 10 premiers articles, et j'aurais un bouton qui quand on clique montre les 10 prochains articles, et qui a cliqué de nouveau, les 10 prochains articles jusqu'à ce que tout soit montré.

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

Est-ce possible d'atteindre dans angular2?

Si oui, s'il vous plaît éclairer moi et la communauté SO.

Merci

Answer 1

Vous devez utiliser le code ci-dessous

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <ul class="results-main-content"> 
    <li class="right-results-section"> 
    <ul class="_result-list"> 
     <li class="result" *ngFor="let item of content"> 
     {{item.colorName}} 
     </li> 
    </ul> 
    </li> 
    <li class="showmore"> 
    <button class="show-more" (click)="getData()" [disabled]="counter>=content.length"> 
     Show more 
    </button> 
    </li> 
</ul> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    data = [...]; // refer plunker 
    content:any[]=new Array(); 
    counter:number; 
    constructor() { 
    this.counter=0; 
    this.getData(); 
    this.name = 'Angular2' 
    } 
    getData(){ 
    console.log(this.counter + 'dat size'+this.data.length) 

    for(let i=this.counter+1;i<this.data.length;i++) 
    { 
    this.content.push(this.data[i]); 
    if(i%10==0) break; 
    } 
    this.counter+=10; 

    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

LIVE DEMO

Answer 2

Vous pouvez utiliser le tuyau de tranche:

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 example

Voir aussi

• How to show 1 element in ngFor in angular2?