Wie das ausgewählte Element in demselben Tag in angular2 anhängen

Question

Ich versuche, wie ein Element aus und fügen Sie das gleiche Element in dem gleichen Tag zu wählen, was wir tun, während Tags in Frage stellt in Stackoverflow

Meine Vorlage, die Auswahl

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

eine Auswählen i die gewählte Array zu schieben und bindet es meine html

My ts,

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

} 

Kann mir jemand bitte Hilfe vorschlagen ...........

Answer 1

Ein <input> Tag kann keine Kinder haben.

Stackoverflow verwendet einen randlosen Eingang in einem umrandeten Container. Die Eingabe verwendet jeden Speicherplatz, der nicht zum Anzeigen ausgewählter Tags benötigt wird. SO verwendet JavaScript, um die Eingabe zu ändern. Je nachdem, welche Browser Sie unterstützen müssen, können Sie dies einfach mit CSS flex erreichen. Für IE < 11 benötigen Sie ein polyfill obwohl

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