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

【问题标题】：How to display first 3 number and last 3 numbers in ngFor loop in Angular如何在Angular的ngFor循环中显示前3个数字和后3个数字
【发布时间】：2020-11-30 08:40:01
【问题描述】：

你好，我有一个数字列表

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 级别

【问题讨论】：

为什么不在 .Ts 中对数组进行切片，然后再将其发送到 html ！
你可以做(projects | slice:projects:0:2)。正如@AlyAbdElRahman 所建议的那样，提前进行切片并包括额外检查数组是否足够长、没有重叠项、检查是否需要显示点等的条件是有意义的。跨度>
我不能，因为它是一个深层嵌套数组
@ExplosionPills 我得到一个深层嵌套数组的数据，所以我无法对其进行切片
@phan686 在这种情况下，您可能需要更新或编写一个新问题，以反映您正在处理的数据的真实性质。

标签： javascript angular

【解决方案1】：

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

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);
}

【讨论】：

但是我不能在模板级别使用 ng For 来做到这一点

【解决方案2】：

一个快速的方法是这样做

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

【讨论】：

如何在前三个和后三个数字之间设置点？

【解决方案3】：

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

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((_,i,{length}) =>  
           (i < 3 || i + 3 >= length));
        }
    }
}

HTML 文件如下所示

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

希望对你有所帮助。

【讨论】：

【解决方案4】：

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

【讨论】：

您好，请在您的回答中添加一些解释