在Angular2中显示NGFOR中的更多按钮

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

您可以使用切片管：

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

另请参见

• 如何在Angular2中的NGFOR中显示1个元素？

Answer 2

通过修改GünterZö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示例

Answer 3

您应该使用以下代码

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

实时演示