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

【问题标题】：How to iterate over only the first few elements using *ngFor如何使用 *ngFor 仅迭代前几个元素
【发布时间】：2018-06-18 11:29:32
【问题描述】：

我正在尝试开发一个 angular（版本 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;  
  }
}

}

【问题讨论】：

你可以在你的类中定义一个函数，例如。 take4() 返回数组的前 4 个元素，然后在模板中写入 *ngFor="let card of take4(cards)"

标签： angular ngfor

【解决方案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">

【讨论】：

【解决方案2】：

方法一：

创建一个新数组并将您要显示的项目放在那里，例如
```
this.filteredCards = this.cards.slice(startIndex, 8);
```

并在你的循环中使用它，当你想显示其他卡片时更改 startIndex：

<div *ngFor ="let card of filteredCards">
    <app-card [card]="card" ></app-card>
</div>

方法二

<ng-container *ngFor ="let card of cards; let i=index">
  <div *ngIf="i <= 8">
    <app-card [card]="card" ></app-card>
  </ng-container>
</div>

【讨论】：

很好的答案，但在方法 2 中它仍然会丢失整个集合。我认为 op 只想让循环短路。