angular - angular2'de ngFor'da Daha Fazla göster butonu

50'den fazla öğeden oluşan bir listem var. Sadece ilk 10 öğeyi göstermek istiyorum ve tıklandığında sonraki 10 öğeyi gösteren, tekrar tıklandığında sonraki 10 öğeyi gösteren bir butona sahip olmak istiyorum, tümü gösterilene kadar.

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

Bunu Angular2'de başarmak mümkün mü?

Eğer öyleyse, lütfen beni ve SO topluluğunu aydınlatın.

Teşekkürler

Cevap #1

Dilme filtresini kullanabilirsiniz:

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 örneği

Ayrıca bakınız

• Angular2'de ngFor ile 1 öğe nasıl gösterilir?

Cevap #2

Günter Zöchbauer kodunu değiştirerek, bunu bu örneğe bakarak başarabilirsiniz

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

stackblitz örneği