Angular ngFor——当ngFor数组为空时，是否可以动态地传入一个虚拟数组?

Question

Angular ngFor——当ngFor数组为空时，是否可以动态地传入一个虚拟数组?

---

目前，我正在做以下作为解决方案。它工作，但想知道是否有可能进一步减少代码。

工作:

模板:

<div *ngFor="let i of [] | skeletonLoadingCount:10 " >
<span>repeated</span>
</div>

管:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'skeletonLoadingCount'
})
export class SkeletonPipe<T = any> implements PipeTransform {
transform(value: any, arg: number): any[] {
if(!(Array.isArray(value) && value.length > 0)) {
return Array.from(Array(arg).keys());
}
return value;
}
}

---

预期:

是否有可能做类似的trackByngFor?

<div *ngFor="let i of []; skeletonLoadingCount:10 " >
<span>repeated</span>
</div>

Answer 1

你可以创建一个" on-fly ";使用' '.repeat(10).split('')。所以你可以使用

<div *ngFor="let i of (list.length?list:' '.repeat(10).split(''))">
repeat
</div>

或者甚至使用变量

count:number=10
<div *ngFor="let i of (list.length?list:' '.repeat(count).split(''))">
repeat
</div>

但我不太确定这样做的目的

注意:你也可以使用变量listToLoop和等于你的"list"或者一个包含10个元素的数组