在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中是否有实现这个的可能？

如果有，请为我和Stack Overflow社区提供指导。

谢谢。

- DingDong

---

如何在Angular2中使用ngFor只显示1个元素 - Günter Zöchbauer

Answer 1

您可以使用“slice”管道：

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显示一个元素？

- Günter Zöchbauer

Answer 2

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

- Vaibhav Chawla

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

在线演示

- Aravind

---

我该如何确保点击时仅显示10个项目？ - DingDong

在 for 循环内部查看 if 条件。 - Aravind

我认为问题不在于for循环中的条件，而是我们在 [diabled] 处理程序中分配的条件。 - DingDong

基本上，默認情況下應該顯示前10個項目。當您單擊按鈕時，將顯示下一個10項目。再次單擊時，將顯示下一個10項目。 - DingDong

基本上，每次点击时，您会显示接下来的10个项目，直到没有更多为止。 - DingDong