Question

我在for循环中显示了用户列表。在随机播放之间，我想显示另一个文本。目前，我已经在HTML中使用了用户列表循环。每3次迭代就会调用另一个组件。

<div *ngFor="let data of userList; let index = index">
       <div *ngIf="index % 3 == 0">
           <app-user-suggestion></app-user-suggestion>
       </div>
</div>

在这里，我的问题是我想在循环中的任意位置而不是每3个位置显示该组件。请给我建议。

Answer 1

建议执行打字稿中的操作以生成随机数。

因此，您可以使用以下方法来计算随机数，

Math.floor(Math.random() * 10) + 1

修改后的 HTML：

<div *ngFor="let data of userList; let index = index">
    <div *ngIf=" (index + 1) % randomNumber === 0 ">
       <app-user-suggestion></app-user-suggestion>
     </div>
</div>

添加 TS：

this.randomNumber = Math.floor(Math.random() * 10) + 1;

这里1和10分别代表开始数和结束数以生成随机数，我给了10个用户，因此您可以根据需要调整这些数字。

正在工作的Stackblitz：https://stackblitz.com/edit/angular-h9t64c

Answer 2

我们可以认为使用Math.random之类的

<!--NOT WORK-->
<div *ngFor="let data of userList; let index = index">
       <div *ngIf="Math.random()>.6">
           <app-user-suggestion></app-user-suggestion>
       </div>
</div>

但不起作用，因为Angular在.html中将所有变量都引用到组件，因此您需要例如在您的.html

中编写一个函数

random()
  {
    return Math.random()
  }

然后写

<div *ngFor="let data of userList; let index = index">
       <div *ngIf="random()<.2">
           <app-user-suggestion></app-user-suggestion>
       </div>
</div>

随机迭代位置在角度7中进入循环

2 个答案: