Question

<ul>
   <li *ngFor="let hero of heroes | slice:0:10;">
       {{ hero.name }}
   </li>
</ul>
<p *ngIf="heroes.length > 10" (click)="showMore()">show more 10</p>

我想在点击时显示更多英雄名字..还需要显示剩下多少英雄名字。

Answer 1

heroes这是一个数组。您编写的ngFor语句将显示该数组的所有元素，因为您不限制显示的元素总数。

如果您使用heroes数组作为临时数组仅包含您在屏幕上显示的元素，showMore()函数可以这样写：

showMore(){
    this.heroes.push(//put one of the elements you want to add to the array here)
    //you can use this line inside a forloop to add as many elements/heroes as you want
}

Answer 2

Stackblitz：https://stackblitz.com/edit/angular-vfw7tu

我只想添加

<ng-container *ngFor="let hero of heroes; let ndx = index">
  <li *ngIf="ndx >= 10">{{ hero.name }}</li>
</ng-container>

所以你得到像

这样的东西

<ul>
   <li *ngFor="let hero of heroes | slice:0:10">
       {{ hero.name }}
   </li>
   <ng-container *ngIf="showMore">
      <ng-container *ngFor="let hero of heroes; let ndx = index">
         <li *ngIf="ndx >= 10">{{ hero.name }}</li>
      </ng-container>
   </ng-container>
</ul>

<button (click)="showMore = true">Show more</button>

Answer 3

您可以使用切片管道使用变量，因此，如果您的变量被调用＆＃34; page＆＃34;并取值：0,1,2,3，...，heroes.lenght / 10

<ul>
   <li *ngFor="let hero of heroes | slice:page*10:(page+1)*10;">
       {{ hero.name }}
   </li>
</ul>
<p *ngIf="(page+1)*10<heroes.length" (click)="page=page+1">show more 10</p>

//in your component.ts
page:number=0;

Answer 4

不使用切片的简单解决方案，示例默认显示10个条目，查看更多和查看更少的按钮。

showMore：布尔值；

 <div *ngFor="let hero of heroes; let i = index">
   <div *ngIf="i < 10 || showMore">{{hero.name}}</div>
 </div>
 <a *ngIf="!showMore" (click)="showMore = true">Show More {{heroes.length - 10}}</a>
 <a *ngIf="showMore" (click)="showMore = false">Show Less</a>

Angular 4 * ng For limits和onclick事件显示更多

4 个答案: