Angular 将一个字符串进行逐字显示的方法汇总

        接上文https://blog.csdn.net/qq_44327851/article/details/136201219, 公司项目是angular,所以实际中使用,我是要考虑到应用Angular框架中,下面是我想到的一些方法汇总,欢迎大家检阅!

  1. 在组件的HTML模板中使用*ngFor指令和setTimeout函数实现逐字显示效果:
    // app.component.ts
    import { Component, OnInit } from '@angular/core';@Component({selector: 'app-root',template: `<div><span *ngFor="let char of text; let i = index"><span *ngIf="i < currentIndex">{{ char }}</span></span></div>`
    })
    export class AppComponent implements OnInit {text = 'Hello World';currentIndex = 0;ngOnInit() {const interval = setInterval(() => {this.currentIndex++;if (this.currentIndex === this.text.length) {clearInterval(interval);}}, 1000);}
    }
    
  2. 使用RxJS的interval操作符和map/pluck/scan/bufferCount操作符:
    // map操作符
    import { Component } from '@angular/core';
    import { interval } from 'rxjs';
    import { map, take } from 'rxjs/operators';@Component({selector: 'app-root',template: `<div>{{ text$ | async }}</div>`
    })
    export class AppComponent {text = 'Hello World';text$ = interval(100).pipe(take(this.text.length),map(i => this.text.slice(0, i + 1)));
    }//scan操作符
    // HTML模板
    <div>{{ text$ | async }}</div>// 组件代码
    text = "Hello World";
    text$ = interval(100).pipe(scan((acc, curr) => this.text.substr(0, curr + 1), '')
    );//pluck操作符
    // HTML模板
    <div>{{ text$ | async }}</div>// 组件代码
    text = "Hello World";
    text$ = interval(100).pipe(pluck('text'),map(i => this.text.substr(0, i + 1))
    );//bufferCount操作符
    // HTML模板
    <div>{{ text$ | async }}</div>// 组件代码
    text = "Hello World";
    text$ = interval(100).pipe(bufferCount(1),map(arr => this.text.substr(0, arr.length))
    );
  3. 使用rjxs的timer操作符和map/pluck/scan/bufferCount操作符:这个方法跟第二点几乎一样,只是把interval操作符换成timer操作符就好了,其它的用法一模一样,所以就不过多叙述了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/724753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么MySQL中多表联查效率低,连接查询实现的原理是什么?

MySQL中多表联查效率低的原因主要涉及到以下几个方面&#xff1a; 数据量大: 当多个表通过连接查询时&#xff0c;如果这些表的数据量很大&#xff0c;那么查询就需要处理更多的数据&#xff0c;这自然会降低查询效率。 连接操作复杂性: 连接查询需要对参与连接的每个表中的数…

从零学习Linux操作系统 第三十二部分 ansible中剧本的应用

一、什么是playbook及playbook的组成 1.Playbook的功能 playbook 是由一个或多个play组成的列表 Playboot 文件使用YAML来写的 play就是一个个模块用列表的方式体现出来 playbook的语法是用YAML的预防进行书写的 2.YAML 简介 是一种表达资料序列的格式&#xff0c;类似XM…

电子元器件选型与实战应用—10 5000字介绍,用MOS管搭建的8种常用电路

文章目录 1. 逻辑门电路1.1 非门1.2 与非门1.3 或非门2. OD门和线与3. 推挽电路4. 电源防反接4.1 PMOS防反接4.2 NMOS防反接5. 电源防串电6. 缓启动开关电路7. 均流电路8. 电平转换(level shift)前文推荐:

【从零开始学GIS再到精通GIS】专题图制作-地图渲染-地图整饰

本篇主要介绍如何在gis中进行专题图制作-地图渲染-地图整饰&#xff1b;示例数据下载链接该网站更新了很多有关地理的数据。 1 数据准备&#xff1a;点、线、面等矢量数据、栅格数据的准备等&#xff08;下一更会详细介绍数据处理等方面的内容&#xff09;&#xff1b; 2 加载…

关于我在项目中封装的一些自定义指令

什么是指令 在Vue中提供了一套为数据驱动视图更为方便的操作&#xff0c;这些操作被称为指令系统。我们看到的v-来头的行内属性&#xff0c;都是指令&#xff0c;不同的指令可以完成或者实现不同的功能。 除了核心功能默认内置的指令&#xff08;v-model和v-show&#xff09;…

开源计算机视觉库opencv-python详解

开源计算机视觉库opencv-python详解 OpenCV-Python的核心功能&#xff1a;安装OpenCV-Python&#xff1a;使用OpenCV-Python的基本步骤&#xff1a;OpenCV-Python的高级应用&#xff1a;注意事项&#xff1a;OpenCV-Python的高级应用示例&#xff1a;1. 人脸识别2. 目标跟踪3. …

记录一则 线上域名证书更新及cdn证书更新

本篇为阿里云免费证书更新记录。 登录阿里云账号 搜索数字证书管理服务管理控制台 点击创建证书 输入你的域名 填写相关信息&#xff08;注&#xff1a;域名验证方式选择文件验证&#xff09; 等待审核通过&#xff08;时间不久&#xff0c;一般为半小时内&#xff09; …

Vue2高级篇

Vue高级 Vue生命周期 生命周期又称为生命周期回调函数、生命周期函数、生命周期钩子, 是Vue在运行过程中的关键时刻帮我们调用的一些指函数, 生命周期函数名字不可修改, 其中的this指向的是vm或组件实例对象. 常用的生命周期钩子: mounted: 发送ajax请求、启动定时器、绑定…

【Web安全】SQL各类注入与绕过

【Web安全】SQL各类注入与绕过 【Web安全靶场】sqli-labs-master 1-20 BASIC-Injection 【Web安全靶场】sqli-labs-master 21-37 Advanced-Injection 【Web安全靶场】sqli-labs-master 38-53 Stacked-Injections 【Web安全靶场】sqli-labs-master 54-65 Challenges 与62关二…

python并发编程:IO模型

一 IO模型 二 network IO 再说一下IO发生时涉及的对象和步骤。对于一个network IO \(这里我们以read举例\)&#xff0c;它会涉及到两个系统对象&#xff0c;一个是调用这个IO的process \(or thread\)&#xff0c;另一个就是系统内核\(kernel\)。当一个read操作发生时&#xff…

无代理方式实现VMware的迁移?详细解析

在当今数字化时代&#xff0c;数据的安全性和可用性对于企业至关重要。尤其是在VMware转变订阅策略后&#xff0c;原本永久订阅的产品转变为以年付费订阅的形式&#xff0c;导致客户不得不支付更多的费用&#xff0c;大幅增加了成本。同时&#xff0c;客户也对VMware未来发展前…

Go-gin-example 第三部分 编写一个简单的文件日志系统

文章目录 本文目标新建logging包file.go编写log文件当前目录结构 接入自定义的log功能验证功能 本文目标 在上一节中&#xff0c;我们解决了 API’s 可以任意访问的问题&#xff0c;那么我们现在还有一个问题&#xff0c;就是我们的日志&#xff0c;都是输出到控制台上的&…

k8s-kubeapps图形化管理 21

结合harbor仓库 由于kubeapps不读取hosts解析&#xff0c;因此需要添加本地仓库域名解析&#xff08;dns解析&#xff09; 更改context为全局模式 添加repo仓库 复制ca证书 添加成功 图形化部署 更新部署应用版本 再次进行部署 上传nginx 每隔十分钟会自动进行刷新 在本地仓库…

人人都写过的6个bug

大家好&#xff0c;我是知微。 程序员写bug几乎是家常便饭&#xff0c;也是我们每个人成长过程中难以避免的一部分。 为了缓解这份“尴尬”&#xff0c;今天想和大家分享一些曾经都会遇到过的bug&#xff0c;让我们一起来看看这些“经典之作”。 1、数组越界 #include <…

Python爬虫:http和https介绍及请求

HTTP和HTTPS 学习目标&#xff1a; 记忆 http、https的概念和区别记忆 浏览器发送http请求的过程记忆 http请求头的形式记忆 http响应头的形式了解 http响应状态码 1 为什么要复习http和https 在发送请求&#xff0c;获取响应的过程中 就是发送http或https的请求&#xff0c…

面试题--01

GC机制 GC机制又称垃圾回收机制&#xff0c;是Python解释器自带一种机&#xff0c;专门用来回收不可用的变量值所占用的内存空间 有三个核心&#xff0c;分别是引用计数、标记清除和分代回收 引用计数&#xff1a;一个变量值如果有一个变量名指向&#xff0c;那么在它身上就计…

DMA 链表模式(LLI)深度解析

在进行一次 DMA 读或者写的时候&#xff0c;可以配置多个链表&#xff0c;从而当一个链表的数据传输完成时&#xff0c;会跳到下一个链表的起始地址&#xff0c;并继续传输数据&#xff0c;直到链表的下一个地址为 0。如果 DMA 使能了完成中断&#xff0c;则当 DMA 发送或者接收…

c++ ponder库实现机制的理解

Ponder是一个用于C的反射库&#xff0c;它允许在运行时查询和操作类型信息。反射通常是动态语言的特性&#xff0c;但Ponder通过提供一套API&#xff0c;使得在静态类型语言C中也能实现类似的功能。这对于需要动态处理对象&#xff0c;如序列化/反序列化、脚本绑定等场景非常有…

微信小程序--注册时获取微信头像

参考官方文档&#xff1a;点击跳转 具体实现&#xff1a; wxml&#xff1a; <button class"avatarBtn" open-type"chooseAvatar" chooseavatar"onChooseAvatar"><image class"avatar" :src"avatarUrl"></…

【语音识别】- 几个主流模型 2024年2月整理

文章目录 1. Wav2Vec 2.02. Whisper3. WeNet4. Paraformer5. Flan-T51. Wav2Vec 2.0 由Facebook AI Research(FAIR)于2020年提出的在语音方向里具有一定影响力的预训练模型。 论文地址:https://arxiv.org/pdf/2006.11477.pdf 项目地址:https://github.com/pytorch/fairse…