如何在 Angular 的 ngFor 循环中显示前 3 个数字和后 3 个数字

Question

你好，我有一个数字列表，比如

array = [1,2,3,4,5,6,7,8,9,10]

所以在这里使用 *ngFor 我显示如下

<div *ngFor =" let data of array"> 
   <p>{{data}}</p>
  </div>

所以在这里我不想显示所有数字而是我想显示在 1,2,3 .... 8,9,10（包括点）

在这里，我遵循了这种技术，但是对于前 3 个数字和点，我该怎么做呢？假设我需要显示前 3 个数字和后 3 个数字，而不考虑数字

<li *ngFor="let project of (projects | slice:projects.length - 4);">

注意：我无法在 .ts 代码中进行更改，因为我将数据作为嵌套数组获取，因此我需要模板 .html 级别

Answer 1

一个快速的方法就是这样做<div *ngFor =" let data of array; let i = index">&nbsp; &nbsp; <p *ngIf="i< 3 || i > array.length - 4 ">{{data}}</p>&nbsp; </div>

Answer 2

您可以通过创建包含您的逻辑的自定义管道来尝试。import {Pipe,PipeTransform} from '@angular/core';@Pipe({&nbsp; &nbsp; name: 'arrayfilter',&nbsp; &nbsp; pure: true})export class ArrayFilterPipe implements PipeTransform {&nbsp; &nbsp; transform(itemsArray: any, args?:any): any {&nbsp; &nbsp; &nbsp; &nbsp; if(itemsArray.length > 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return itemsArray.filter((_,i,{length}) =>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(i < 3 || i + 3 >= length));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}HTML 文件如下所示<div *ngFor =" let data of sample_array | arrayfilter">&nbsp; &nbsp; <p>{{data}}</p>&nbsp; </div>我希望这会帮助你。

Answer 3

您可以过滤数组并防止较小数组的重复项。const&nbsp; &nbsp; array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];for (const value of array.filter((_, i, { length }) => i < 3 || i + 3 >= length)) {&nbsp; &nbsp; console.log(value);}

Answer 4

&nbsp;&nbsp;&nbsp;&nbsp;<tr&nbsp;*ngFor="let&nbsp;dc&nbsp;of&nbsp;(drdInfo.companyList['data']&nbsp;|&nbsp;slice:drdInfo.companyList['data'].length&nbsp;-&nbsp;4)">