如何使用* ngFor迭代仅前几个元素

Question

我正在尝试开发angular（version 6）应用程序，并且正在使用* ngFor inn迭代数组的地方。在HTML中，由于输出设计变得不均匀，我只想查看前8个元素。其余的元素基本上可以存储用于下一个按钮调用。我知道一种方法可以将我自己在其上调用* ngFor的数组限制为8，但这似乎比其他任何东西都更容易破解。任何帮助将非常感激。提前致谢。HTML ----->

<div *ngIf="!isloading" style = "padding-right: 300px; padding-left: 300px">
    <ng-container *ngIf="cards">
    <div *ngFor ="let card of cards">
    <app-card [card]="card" ></app-card>
    </div>
</ng-container>
</div>
<div class ="loader" *ngIf = "isloading">

JS --->

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
  @Input() cat :string; 
  @Input() sucat:string;



  //These 4 to represent current feed cat and supercat
  private curcat : string;
  private cursu : string;
  private page : number;
  //to  determine if page loading 
  private isloading : boolean = false;


  //These to  deal with the the JSON of the response Data
  private cards : Card[] = [];
  private itemcount : number;
  private lastpage : number  = 10;
  constructor(private contentservice: ContentService) { }

  ngOnChanges(changes : SimpleChange){
    this.currentfeedparam(this.cat,this.sucat);
    this.fetchdata(this.cursu,this.curcat);
  }

  ngOnInit(){
  }

  currentfeedparam(c:string,s:string){
    //this fucntion to set feed status
    this.curcat = c;
    this.cursu = s;
    this.page = 1;  
  }

  fetchdata(su :string,cat : string){
  this.isloading = true;  
  if(this.lastpage >=  this.page){
    this.contentservice.getcontentdata(cat,su,this.page)
    .subscribe((response) => {
      this.isloading = false;  
      const data = new JsonData(response);
      this.lastpage = data.lastPage;
      console.log(this.page+' '+this.lastpage);
      this.page++;//
      this.cards = data.items;
      });

  }
  else{
    console.log('last page reached');
    this.isloading = false;  
  }
}

}

Answer 1

您可以尝试此解决方案

您可以使用slice管道。

<div *ngIf="!isloading" style = "padding-right: 300px; padding-left: 300px">
    <ng-container *ngIf="cards">
    <div *ngFor ="let card of cards | slice:0:8;">
    <app-card [card]="card" ></app-card>
    </div>
</ng-container>
</div>
<div class ="loader" *ngIf = "isloading">