如何在angular2中的相同标记中附加所选项目

Question

我正在尝试选择一个项目并在同一个标​​签中添加相同的项目，就像我们在stackoverflow中的ask 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

我的，

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

}

有人可以建议我帮忙...........

Answer 1

<input>代码无法生成任何子代。

Stackoverflow在有边框的容器中使用无边框输入。输入使用显示所选标签不需要的任何空间。 SO利用JavaScript来调整输入的大小。但是根据您需要支持的浏览器，可以使用CSS的flex轻松完成。 对于IE＆lt; 11，您需要polyfill但

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;