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

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

總結

以上是生活随笔為你收集整理的误打误撞的模板字符串的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。