前情回顧：之所以用到模板字符串呢，是在這樣一個場景中用到一個類似微信發朋友圈時選擇圖片時的一個場景，如圖所示

當時腦抽是怎麽想的呢，其實也很簡單，當時想的就是新建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啦！

——來自一個時不時智商下線的程序媛小白

誤打誤撞的模板字符串