it-swarm.com.ru

Показать больше кнопок в ngFor в angular2

У меня есть список из более чем 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.

Спасибо

3
DingDong

Вы должны использовать приведенный ниже код

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

4
Aravind

Вы можете использовать трубу среза:

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>

Пример плунжера

Смотрите также

7
Günter Zöchbauer

Изменяя код Günter Zöchbauer, вы можете добиться этого, взглянув на этот пример

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

1
Vaibhav Chawla