如何在 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">

    <p *ngIf="i< 3 || i > array.length - 4 ">{{data}}</p>

  </div>

Answer 2

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

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>

我希望这会帮助你。

Answer 3

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

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

}

Answer 4

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