我從接口拿到的數(shù)據(jù)是一個普通的html模板（帶樣式），現(xiàn)在我用angular4開發(fā)的項目，我想把這段html顯示到界面上，然后用戶可以編輯這段html的一些內(nèi)容，假如從接口的數(shù)據(jù)如下：

<div class="container">
    <div class="thumbnail" style="width:100px;height:200px">
        <img src="../xxx/xxx.png" alt="" style="width:100%">
    </div>
    <h1 class=title>大寶五折起</h1>
    <p class="desc">雙11大促銷</p>
    <div class="tag">
        <span>雙11</span>
        <span>促銷</span>
        <span>五折</span>
    </div>
</div>

現(xiàn)在我要把這段html顯示到頁面的工具欄，當(dāng)用戶點擊這個html的時候，這段html模板就會被復(fù)制到編輯區(qū)域，并且變的可編輯（angular4模板）

<div class="container">
    <div class="thumbnail" style="width:100px;height:200px">
        <img src="../xxx/xxx.png" alt="" style="width:100%">
    </div>
    <h1 class=title>{{title}}</h1>
    <p class="desc">{{desc}}</p>
    <div class="tag">
        <ng-container *ngFor="let tag of tags">
            <span>tag.name</span>
        <ng-container/>
    </div>
</div>

這樣用戶編輯相應(yīng)的字段名字，編輯區(qū)的文本內(nèi)容也會隨著改變。不知道我描述清楚沒有，求各位大神提供下思路。

上一個大致的圖：點擊工具欄模板，預(yù)覽區(qū)會出現(xiàn)同樣一個模板，在編輯區(qū)編輯模板的屬性，預(yù)覽區(qū)會跟著變化