Angular 2循环遍历列表有一些延迟

2024-05-09

如何使用 Angular 2 和 TypeScript 以一定延迟循环遍历数组?

我有一个数组,

students: Array<any> = [
    {
      name: "Alan"
    },
    {
      name: "Jake"
    },
    {
      name: "Harry"
    },
    {
      name: "Susan"
    },
    {
      name: "Sarah"
    },
    {
      name: "Esther"
    }
];

我想循环遍历列表并用 a 显示名称2000ms delay.

<div *ngFor="let student of students">
    {{student.name}}
</div>

不能延迟工作,但会立即循环。


只需使用setTimeout。例如(*未测试):

students: Array<any> = [ ];

populateArrayWithDelay():void{
    let people = [
        {
            name: "Alan"
        },
        {
            name: "Jake"
        },
        {
            name: "Harry"
        },
        {
            name: "Susan"
        },
        {
            name: "Sarah"
        },
        {
            name: "Esther"
        }
    ];
    for(let i = 0; i < people.length; i++){
        let student = people[i];
        setTimeout(() => {
            this.students.push(student);
        }, 2000*(i+1));
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2循环遍历列表有一些延迟 的相关文章

  • Objects.deepToString(Object o) 方法

    班上java util Objects包含deepEquals Object a Object b 可用于比较任何类型的对象 包括数组和空引用 的方法 但不包含类似的方法deepToString Object o 这令人失望 顺便说一下 这
  • Angular6 材料垫选择列表中当前选择的值

    使用角度材质2垫选择列表 能够判断当前选项是选中还是未选中 Boolean 组件 html
  • 为什么零长度 VLA 是 UB?

    2011年标准明确规定 6 7 6 2 数组声明符 如果大小是一个不是整数常量表达式的表达式 如果它出现在 在函数原型范围内声明 它被视为被替换为 否则 每次评估时 其值都应大于零 每个实例的大小 变长数组类型的值在其生命周期内不会改变 其
  • 获取异常 jQuery 必须包含在 Bootstrap 的 JavaScript 之前

    我遇到以下异常 bootstrap js 240 Uncaught TypeError Bootstrap 的 JavaScript 需要 jQuery jQuery 必须包含在 Bootstrap 的 JavaScript 之前 在 Ob
  • 不区分大小写的 array_unique

    我正在尝试编写几行代码来创建一个不区分大小写的数组唯一类型函数 这是我到目前为止所拥有的 foreach topics as value lvalue strtolower value uvalue strtolower value if
  • 如何将 Angular Universal 应用程序部署到 Node.js 生产服务器?

    我有一个带有 Universal 的 Angular 8 应用程序 我想将其部署到共享 Web 主机生产服务器 我提前与网络主机核实过 他们告诉我可以在他们的共享网络托管上托管 Angular 通用网络应用程序 但是 无论我做什么 我都无法
  • 静态数组VS。 C++11 中的动态数组

    我知道这是一个非常古老的争论 全世界已经讨论过很多次了 但我目前很难决定在特定情况下应该使用静态数组和动态数组之间的哪种方法而不是另一种方法 实际上 我不会使用 C 11 我会使用静态数组 但我现在很困惑 因为两者可能有相同的好处 第一个解
  • PHP 使用主键和辅助键对多维数组进行排序[重复]

    这个问题在这里已经有答案了 如何按主键和辅助键对多维数组进行排序 例如 假设有以下数组 result array result 0 prio 1 result 0 date 2010 02 28 result 0 post February
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 如何缩短 PHP if 语句?

    我有一个 if 语句 我需要将单个字符串与许多不同的选项进行比较 我在下面发布的代码非常清楚地表明了我的意思 我知道有两种方法可以做到这一点 但另一种甚至更长 那么 是否有任何函数可以以更短的方式实现类似的功能 我的要求可能看起来很愚蠢 但
  • 如何循环遍历字典列表并打印特定键的值?

    我是 Python 新手 有一个问题 我知道这是一个非常简单的问题 运行Python 3 4 我有一个需要迭代并提取特定信息的列表 以下是列表 称为部分 的示例 已截断 数千个项目 state DEAD id phwl type name
  • 如何让 webpack 和 iis express 协同工作?

    I have Angular 2 和 Webpack 2 入门 https github com qdouble angular webpack2 starter它通过 webpack dev server 在节点上运行 我如何使用 web
  • 如何在 comments/JSDoc 中引用另一种打字稿类型?

    我熟悉 Javadoc 在 Javadoc 中 您可以放置 一个引用放置在另一种类型上的 Javadoc 的链接 https stackoverflow com questions 5915992 how to reference a me
  • 找不到管道“货币”(AOT)

    我们有一个从 Angular 6 升级到 7 的 Angular 我们正在使用内置的currency管道 服务时一切正常 ng serve 以及在 DEV 中构建时 但是当我们尝试构建生产我们正在得到The pipe currency co
  • 排除 tsconfig.json 中的子目录

    我已经安装了 TypeScript 1 8 2 并使用 Visual Studio 2015 我有一个简单的项目 在从 tsconfig json 文件中排除文件夹时遇到问题 问题是我想排除文件typings browser d ts 和文
  • Java中如何高效存储小字节数组?

    By small字节数组 我指的是长度从 10 到 30 的字节数组 By store我的意思是存储它们在内存中 不序列化并持久化到文件系统 系统 macOS 10 12 6 Oracle jdk1 8 0 141 64 位 JVM 参数
  • 有没有办法扩展 angular.json 中的配置?

    在构建 Angular 6 应用程序时 我需要同时指定两件事 如果是生产或开发版本 我正在使用的区域设置 In my angular json I have build configurations production fileRepla
  • 如何对 NestJS 中的控制器应用防护进行单元测试?

    我在 NestJS 中配置了一个控制器 我想检查是否设置了适当的防护 有人有如何完成此操作的示例吗 这个 删节的 示例作为一个应用程序可以正常工作 所以我只是在测试指导之后 您会注意到在用户测试中有一些我正在调用的测试Reflect get
  • 错误::预期有间谍,但未定义

    我收到预期的 Spy 错误 但在我的 Angular 10 测试中未定义 我正在使用 Jasmine 和 Karma 我已将 SpreadsheetService 服务模拟为mockSpreadSheetService 我正在调用它的方法
  • PySpark - RDD 到 JSON

    我有一个 Hive 查询返回以下格式的数据 ip category score 1 2 3 4 X 5 10 10 10 10 A 2 1 2 3 4 Y 2 12 12 12 12 G 10 1 2 3 4 Z 9 10 10 10 10

随机推荐