Question

在* ngFor循环中，我希望HTML元素随机显示自身... 50/50的机会。

这是我认为可行的方法：

<span *ngIf="Math.random() < 0.5">test</span>

但是我得到了错误：

BookingPageComponent.html:139 ERROR TypeError: Cannot read property 'random' of undefined

我在做什么错，应该如何正确处理？

谢谢！

Answer 1

Math类不适用于求值表达式，但可用于组件类内部。

因此您可以创建一个方法：

public showRandomly(bias) {
    return Math.rand() < bias;
}

然后在您的ngIf中使用它：

<span *ngIf="showRandomly (0.5)">test</span>

请注意，此随机变量将在每次视图刷新时运行，并且可能不会给您预期的结果。

Answer 2

您不能在模板中运行它。您可以在组件中调用一个函数，该函数调用Math.Random

示例：

<span *ngIf="randomMath() < 0.5">test</span>

在您的组件中：

randomMath() { return Math.random() }

Answer 3

数学类不适用于表达式本身，但您可以在TS文件中这样做：只需写

Math: Math = Math;

然后保留模板

<span *ngIf="Math.random() < 0.5">test</span>

但是建议添加如下新功能：

<span *ngIf="isVisible()">test</span>

在您的TS文件中：

ifVisible(): boolean{
    return Math.random() < 0.5; 
}