在ng2中顯示更多按鈕angular2

Question

我有超過50個項目的列表。我只想顯示前10個項目，我會看到一個按鈕，當點擊後顯示下10個項目，並再次點擊時，將顯示下10個項目，直到全部顯示。

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

這是可能的angular2實現？

如果是這樣，請賜教和SO社區。

感謝

Answer 1

你應該使用下面的代碼

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

可以使用片管：

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

又見

• How to show 1 element in ngFor in angular2?