在 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

你应该使用下面的代码

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

另见

Answer 3

通过修改 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 example

在 angular2 的 ngFor 中显示更多按钮

Show more button in ngFor in angular2

button

show-hide

typescript

ngfor

angular