如何在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代码中进行更改，因为我正在以嵌套数组的形式获取数据，所以我需要在template.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)">