在angular的for循环内指定索引之间生成随机数

Question

我有一个静态图像数组

public ImageList: Array<any> = [
{"id" : 1, "Url" :"assets/images/...svg"}, 
{"id" : 2, "Url" :"assets/images/...svg"}, 
{"id" : 3, "Url" :"assets/images/..."}, 
{"id" : 4, "Url" :"assets/images/..."}
];

我有另一个data array

data:any=[];

<div *ngFor="let row of data; let i=index">
<img src=''/>
</div>

现在在这个for循环中，我想从for循环中随机选取图像并显示在image标签中

for循环内1 to 4生成随机数的任意解

感谢

Answer 1

我个人认为usecase是创建一个可以重用的结构指令的好例子!

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
interface RandomContext<T> {
appRandom: T[];
$implicit?: T;
controller: {
next: () => void;
};
}
@Directive({
standalone: true,
selector: '[appRandom]',
})
export class RandomDirective<T> {
private context: RandomContext<T> = {
appRandom: [],
$implicit: undefined,
controller: {
next: () => this.pickNewElement(),
},
};
@Input()
set appRandom(elements: T[]) {
this.context.appRandom = elements;
this.pickNewElement();
}
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {
this.viewContainer.createEmbeddedView(this.templateRef, this.context);
}
private pickNewElement(): void {
this.context.$implicit =
this.context.appRandom[
Math.floor(Math.random() * this.context.appRandom.length)
];
}
}

使用例子:

<ng-container
*appRandom="
['foo', 'bar', 'hello', 'world'];
let random;
let ctrl = controller
"
>
<div>{{ random }}</div>
<button (click)="ctrl.next()">Randomize</button>
</ng-container>

试试这个:https://stackblitz.com/edit/angular-ivy-bvsfbe?file=src/app/app.component.html

当然可以省略按钮，我添加它是为了演示。而不是字符串你添加你的对象数组，随机产生随机选择的对象，然后，你也可以选择另一个名字，而不是随机。这看起来像:

<div *appRandom="ImageList; let image">
<img [src]="image.Url"/>
</div>

干净的模板，不是吗?