首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让*ngFor随机显示?

ngFor是Angular框架中的一个指令,用于循环渲染列表数据。默认情况下,ngFor会按照数据在数组中的顺序依次显示。如果要实现随机显示,可以通过以下步骤:

  1. 创建一个数组,包含要显示的数据项。
  2. 在组件中定义一个方法,用于生成随机排序的数组。
  3. 在模板中使用*ngFor指令,并将数组传递给它。

下面是一个示例代码:

在组件中:

代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-random-ngfor',
  template: `
    <div *ngFor="let item of randomItems">{{ item }}</div>
  `,
})
export class RandomNgForComponent {
  items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  get randomItems(): string[] {
    return this.shuffleArray(this.items);
  }

  shuffleArray(array: any[]): any[] {
    let currentIndex = array.length;
    let temporaryValue;
    let randomIndex;

    while (currentIndex !== 0) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }
}

在上述代码中,我们定义了一个items数组,包含要显示的数据项。然后,通过randomItems方法返回一个随机排序的数组。在模板中,我们使用*ngFor指令循环渲染randomItems数组中的每个项。

这样,每次渲染时,*ngFor都会按照随机顺序显示数组中的数据项。

请注意,这只是一种实现随机显示的方法,可能不适用于大型数据集。对于大型数据集,可能需要使用其他算法来生成随机排序的数组。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何 PowerBI Y 轴完美显示

问题重述 在 PowerBI 原生可视化方面,一直有个小 BUG 的存在,那就是 Y 轴不能正常良好显示,如下: 如上图所示,在 5 月柱子上的数字显示,明显表现得空间不足,它顶住了整个图表的绘图区,...且同时与柱子形成了叠加,导致这种显示不够完美。...,则更加精简,如下: 现在的效果是不是好多了,它是完美的显示。...改成折线图,也可以完美显示,如下: 这里做了一些辅助设置,如下: 用形状做了图表的衬底,更有空间感。 取消了 Y 轴刻度及网格的显示,更简单利落。 加入了一条恒线(不是横线),来显示 X 轴。...显示的值太多太密导致有的被自动隐藏了,需要显示特征点,怎么办? 上述两点都可以得到解决,我们将在后续文章再给出解决方案。 在订阅了BI佐罗讲授的《BI真经》之《BI进行时》课程区,可以下载本文案例。

3.8K30

zblogphp随机显示文章的教程

它会先给你这本书的每一页都随机写一个数字,这就要翻过每一页了。接着,再排序比大小,把每一页的数字都排序排一遍,这就又要把书翻一遍。再取出数字最小的那几条记录。所以,这就是慢的原因。...以上就是解释,不明觉厉啊,无论是计算机专业术语还是mysql官网文档的解释我都不明白,不过明不明白不要紧,要紧的是你必须的修改,否则就别想通过审核,于是乎,鸟儿的随机显示就横空出世,随机的主体思路: 鸟儿随机显示代码...2、获取一个随机数,在最大值和最小值之间。 3、用这个随机数去查表。...问题可以解决,可是不是谁都愿意使用插件的啊,于是继续寻找,偶然间看到飞鸟博客提供了一种方法: 飞鸟随机原理 1、先从数据库中提出一部份数据,加入数组中; 2、随机抽取数组中的数据,并显示。...target=\"_blank\">{$related->Title}";     }     return $str; } 代码中,使用的PHP中的array_rand()函数,用随机获取数组的键名

58110

Artalk 无评论随机显示诗词

前言 Artalk 无评论时随机显示诗词(今日诗词或一言等)的效果,如本博客截图所示: 在本博客现阶段如果没有换主题或评论系统,随便找一篇没有评论的文章都可以看到实际效果。...我无意中发现,在 Artalk 的管理后台的 前端配置 中 无评论显示文字 可以插入 HTML 代码。 不知道这是开发者的有意或无意,这一个需要 JS 侵入性实现的功能变得简单。...方法 打开 Artalk 管理后台,找到 前端配置 再找到 无评论显示文字: 输入: 1 <img alt="今日诗词" src="https://v2.jinrishici.com/one.svg?...我自己试了好几个颜色,<em>显示</em>结果都不太满意,然后我就问了一下 ChatGPT。...什么颜色的文字能同时在 #22272e 和 #FFFFFF 这两种背景色下都能优雅的<em>显示</em>,要求这种颜色必须具备浏览能识别的英文名称 为什么要以 #22272e 作为暗黑模式的代表色呢?

21230

MySQL实战第十七讲-如何正确地显示随机消息?

这个英语学习 App 首页有一个随机显示单词的功能,也就是根据每个用户的级别有一个单词表,然后这个用户每次访问首页的时候,都会随机滚动显示三个单词。...现在,如果你来设计这个 SQL 语句,你会怎么写呢? 为了便于理解,我对这个例子进行了简化:去掉每个级别的用户都有一个对应的单词表这个逻辑,直接就是从一个单词表中随机选出三个单词。...接下来,我们就一起看看要随机选择 3 个单词,有什么方法实现,存在什么问题以及如何改进。 内存临时表 首先,你会想到用 order by rand() 来实现这个逻辑。...因为将 max_length_for_sort_data 设置成 16,小于 word 字段的长度定义,所以我们看到 sort_mode 里面显示的是 rowid 排序,这个是符合预期的,参与排序的是随机值...今天的例子里面,我们不是仅仅在数据库内部解决问题,还会应用代码配合拼接 SQL 语句。在实际应用的过程中,比较规范的用法就是:尽量将业务逻辑写在业务代码中,数据库只做“读写数据”的事情。

44620
领券