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

问题描述

嗨，我这里有一个数字列表，如

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

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

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

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

在这里我遵循了这种技术，但是对于前3个数字和点，我该怎么做？说我需要显示前3个数字和后3个数字，而与数字无关

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

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

解决方法

您可以过滤数组，并防止较小的数组出现重复项。

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

for (const value of array.filter((_,i,{ length }) => i < 3 || i + 3 >= length)) {
    console.log(value);
}

,

一种快速的方法就是这样做

<div *ngFor =" let data of array; let i = index">
    <p *ngIf="i< 3 || i > array.length - 4 ">{{data}}</p>
  </div>

,

您可以通过创建包含您的逻辑的自定义管道来进行尝试。

import {Pipe,PipeTransform} from '@angular/core';
@Pipe({
    name: 'arrayfilter',pure: true
})

export class ArrayFilterPipe implements PipeTransform {
    transform(itemsArray: any,args?:any): any {
        if(itemsArray.length > 1) {
           return itemsArray.filter((_,{length}) =>  
           (i < 3 || i + 3 >= length));
        }
    }
}

HTML文件如下所示

<div *ngFor =" let data of sample_array | arrayfilter">
    <p>{{data}}</p>
  </div>

希望这对您有所帮助。

,

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