如何選擇的項目追加在相同的標籤中angular2

Question

我想選擇一個項目，追加相同的項目在相同的代碼類似，而在選擇標籤我們做什麼問的問題在計算器

我的模板，

 <div class="form-group" *ngFor="let i of show"> 
<label for="exampleInputEmail1">Tags</label> 
<input type="text" class="form-control" [formControl]="form.controls['tags']" (keyup)="tags(key.value)" {{i}}#key id="exampleInputEmail1" aria-describedby="emailHelp"> 

     </div> 
           <div class="col-sm-12 nopadding "> 

           <ul class="searchlist" > 
            <li *ngFor="let detail of tag"> 

             <a (click) = "catch(detail.type)">{{detail.type}}</a> 
            </li> 
           </ul> 

          </div> 

在選擇一個我推選擇陣列並將其綁定到我的HTML

我的TS，

catch(val){ 
    this.tag = []; 
    this.show.push(val);console.log("val"+this.show) 

} 

可有人請建議我幫...........

Answer 1

的<input>標籤不能有任何孩子。

Stackoverflow在有邊界的容器內使用無邊框輸入。輸入使用任何不需要顯示選定標記的空間。 SO利用JavaScript來調整輸入大小。但取決於您需要支持哪些瀏覽器，可以使用CSS的flex輕鬆完成此操作。 對於IE < 11你需要一個polyfill雖然

.container { 
 
    border: 1px solid black; 
 
    display: flex; 
 
} 
 
.tag { 
 
    border: 1px solid red; 
 
} 
 
.tag-input { 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <span class="tag">asdasdasd</span> <!-- you'd use *ngFor here --> 
 
    <span class="tag">dsadasd</span> 
 
    <span class="tag">asdasdasd</span> 
 
    <span class="tag">asdasdasd</span> 
 
    <input class="tag-input" type=text> 
 
</div>

要追加選定的標籤