误打误撞的模板字符串

前情回顾:之所以用到模板字符串呢,是在这样一个场景中用到一个类似微信发朋友圈时选择图片时的一个场景,如图所示

当时脑抽是怎么想的呢,其实也很简单,当时想的就是新建div嘛,然后append到父容器就ok啦,那问题就在于拼接字符串嘛,哎哟,想想就。。。然后就偷了个懒,用了模板字符串。接下来就上代码啦。

 1 `<div class="col-xs-6 col-md-6" 
 2             style="border: 1px solid #eeeeee;  
 3             display: flex;
 4             -webkit-align-items: center;
 5             align-items: center;
 6             -webkit-justify-content: center;
 7             justify-content: center;"
 8             id=${this.index}>
 9         <span style="color: #f10e0e;display: inline-block;
11               position: absolute;
12               top: 3px;
13               right: 3px;">
14               </span>
15         < img src= ${src} alt="" class="img-responsive">
16       </div>`;

噢啦,写是写出来了,那么问题来了,怎么append到父容器上呢?常规思路appenChild就ok啦,然后你会收到一个提示消息就是***不是一个节点,对哟,模板字符串嘛终究还是字符串,这又该怎么处理呢

1 container.append(issueImg);
1 btn.on('click', () => {
2 // to
3     });

好了,到这里可以说大工结束了,是不是感觉自己萌萌哒。。。

问题的关键来了,前端用的是啥呢,angular4 !!!

ngFor有必要了解一下!

ngFor指令是干啥的呢,敲黑板,重点来了:该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象,其值与可迭代对象对应项的值相关联。

示例:

 items = ['张三','李四','王二'];

<ul>  <li *ngFor="let item of items; let i = index"> {{i}}. {{item}}  </li> </ul>

同样的上面的也只要循环一下下就ok啦!

——来自一个时不时智商下线的程序媛小白

 

转载于:https://www.cnblogs.com/Vibge/p/9415951.html

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

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

相关文章

工作的前两天

硬件问题 工作的第一天&#xff0c;我接触是硬件。 公司需要为服务器装入windows server 2003 的系统&#xff0c;可是问题一直在出现。 服务器原先的系统是装过SQL 2000 之后&#xff0c;系统就不能进去&#xff0c;总是提示密码错误。后来决定用ERD光盘破解密码&#xff0c;接…

java类型转换方法_Java中基本数据类型转换的方法

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼一、自动类型转换(隐式类型转换)整型、实型(常量)、字符型数据可以混合运算。运算中&#xff0c;不同类型的数据先转化为同一类型&#xff0c;然后进行运算。转换从低级到高级。自动转换有以下规律&#xff1a;小的类型自动转化为大…

鸟哥linux 私房菜

对于任何系统如果我们要加快系统性能&#xff0c;内存的大小很重要&#xff0c;这个影响很大。尤其是对Linux的服务器环境。 CPU就像大脑而内存就像心脏和肚子之类的 一开始我是这么认为的&#xff0c;看完后才知道内存和硬盘也是大脑的一部分&#xff0c;内存就是处理大脑信息…

你知道GNU C 对C语言的扩展吗?

为了方便使用&#xff0c;GNU C在标准C语言的基础上进行了部分方便开发的扩展。这里讲解一些开发中可能会用到的&#xff0c;或者使用频率比较高的内容。零长度数组和变量长度数组GNU C 允许使用零长度数组&#xff0c;比如&#xff1a;char data[0];GNU C 允许使用一个变量定义…

java 反射 内存_Java内存到反射入门

Java内存到反射入门(一)初识Java内存平常我们最常提到的的JAVA分区是这三个分区其中方法区是一个特殊的堆&#xff0c;功能如图上所示。初识反射&#xff1a;框架设计的灵魂反射的功能&#xff1a;将类的各个组成部分封装为对象&#xff0c;并在程序运行的过程中可以调用它们。…

stopping hbasecat: /tmp/hbase-elastic-master.pid: 没有那个文件或目录

stop-hbase.sh 挂了。。。 原因其实也简单&#xff0c;默认情况下hbase的pid文件保存在/tmp目录下&#xff0c;/tmp目录下的文件很容易丢失&#xff0c;不知道为什么他不会自动创建一个非临时目录&#xff0c;大概是因为权限不好控制&#xff0c;需要手动来&#xff1f; 修改为…

工作和在学校最大的区别是什么?

很多人在学校的时候过得很舒服&#xff0c;但是一旦进入工作状态&#xff0c;或者说职场状态的时候&#xff0c;就会表现的不是那么好。或者紧张、或者迷茫&#xff0c;学校和职场是两种不同的环境&#xff0c;需要我们调整下&#xff0c;一下是朱老师的文章&#xff0c;希望对…

莞尔一笑

当ATM机发善心的时候…… 看&#xff0c;连冷冰冰的机器都有善心&#xff0c;可现实中的有些人………… 有一次ATM机取400元吐出4000元&#xff0c;银行呼吁市民还钱。之后银行收到一封信&#xff0c;内容如下&#xff1a; 1、请在我规定的时间到我家来取&#xff0c;时间是早上…

java查询多条_Mybatis查询多条记录并返回List集合的方法

实体对象如下:/**使用lobmok插件*/GetterSetterNoArgsConstructorToStringEqualsAndHashCodepublic class Vendor {private String vend_id;private String vend_name;private String vend_address;private String vend_city;private String vend_state;private String vend_zi…

服务容错模式

0.背景 随着服务框架和服务治理体系的逐步成熟&#xff0c;服务化已成为系统设计的趋势。随着业务复杂度的增加&#xff0c;依赖的服务也逐步增加&#xff0c;出现了不少由于服务调用出现异常问题而导致的重大事故&#xff0c;如&#xff1a; 1&#xff09;系统依赖的某个服务发…

从大学到结婚,我和小云的这13年

看了龙哥的文章&#xff0c;感触很深&#xff0c;我有好几次想写一篇我和小云的文章&#xff0c;记录下自己和小云这些年一起经历的很多事情&#xff0c;但是每每都停下来去做了觉得更重要的其他事情&#xff0c;这次真的决定要写了。我和小云是大学同学&#xff0c;我们大一认…

PHP realpath() 函数

realpath() 函数返回绝对路径。 该函数删除所有符号连接&#xff08;比如 /./, /../ 以及多余的 /&#xff09;&#xff0c;返回绝对路径名。 若失败&#xff0c;则返回 false。比如说文件不存在的话。 语法readlink(linkpath) 参数描述linkpath必需。规定要检查的连接路径。说…

xshell如何运行java_利用Xshell往应用服务器上部署项目

1.首先查询中间件的进程Idps -ef|grep ./startapusic2.然后杀掉进程kill -9 16833.再次查询进程&#xff0c;查看是否关闭成功&#xff0c;如果没有/bin目录下的东西了说明关闭成功4.利用ls查看当前路径下的文件5.启动中间件./startapusic6.如果显示地址已在使用&#xff0c;则…

详解Linux内核在arm上的启动过程

Linux内核加载过程通常&#xff0c;Linux内核都是经过gzip加载过之后的映像文件。bootloader复制压缩内核到内存空间。内核自解压。运行内核。编译完成的Linux内核存放在哪里&#xff1f;./vmlinux elf格式未压缩内核。arch/arm/boot/compressed/vmlinux 压缩以后的elf格…

回头再见他

VMWARE的DRS和容灾什么的没关系&#xff0c;&#xff0c;全称是Ditributed Resource Scheduler, 是帮助在ESXserver之间分配物理资源的&#xff0c;同时它还可以用来管理资源&#xff0c;比如你可以把100台ESX物理机的资源做成一个资源池&#xff0c;然后对关键性的应用服务器设…

java 数据库 properties_原生Java读取properties连接数据库

将数据库的驱动、url、用户名、密码等信息以键值对的形式存放在properties文件中&#xff0c;工具类初始化时从配置文件中读取所要连接数据库的信息。当需要更改连接的数据库时&#xff0c;只需要更改配置文件即可&#xff0c;而不必改写工具类的代码。1.在项目中创建一个prope…

【谱聚类算法总结】

前言&#xff1a;以前只是调用过谱聚类算法&#xff0c;我也不懂为什么各家公司都问我一做文字检测的这个算法具体咋整的&#xff0c;没整明白还给我挂了哇擦嘞&#xff1f;讯飞还以这个理由刷本宝&#xff0c;今天一怒把它给整吧清楚了&#xff0c;下次谁再问来&#xff01;说…

嵌入式的汉字原来是这样显示的?

摘要&#xff1a;LCD是嵌入式常见设备&#xff0c;如何在LCD上显示汉字和英文&#xff1f;矢量字体和点阵字体有何不同&#xff1f;同一个字符为何有多种编码&#xff1f;GB2312、GB18030指什么&#xff1f;他们之间有关系吗&#xff1f;嵌入式设备如何支持多国语言&#xff1f…

查看数据库、表、索引的物理存储情况

在管理、维护数据库时&#xff0c;经常需要查看数据库文件、日志文件所占用的磁盘空间&#xff0c;以及磁盘还剩下的磁盘空间&#xff0c;你可以通过下面几种方面查看数据库文件详细情况&#xff1a;1&#xff1a; 是通过远程连接(或VPN)连接到数据库服务器&#xff0c;直接去查…

Spring简化Java开发_spring如何简化java开发

1、spring简介Spring的主要目的是用来替代更加重量级的企业级的java技术2、spring如何简化java开发1)基于POJO的轻量级和最小侵入性编程&#xff1b;2)通过依赖注入和面向接口实现松耦合&#xff1b;3)基于切面和惯例进行声明式编程&#xff1b;4)通过切面和模板减少样版式代码…