误打误撞的模板字符串

Posted 2020-12-27 vibge

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

当时脑抽是怎么想的呢，其实也很简单，当时想的就是新建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}  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啦！

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