очистить значение алфавита после выбора результатов поиска

Question

• У меня есть код поисковой системы в angular2.
• когда я выбираю результаты поиска, мне нужно отобразить значения в текстовом поле с крестиком рядом с ним.
• сейчас я получаю результаты.
• но когда я набираю алфавит h в текстовом поле, я вижу некоторые результаты, но при выборе наведения алфавит h не исчезает.
• чтобы он исчез, я сделал значение текстового поля пустым, но все еще не работающим.
• с моим кодом и бликом стека ниже
• Можете ли вы помочь мне.
• чтобы в будущем я мог реализовать себя.

https://stackblitz.com/edit/angular6-fdwnew?file=app/app.component.ts

add(item){
        console.log("item--->", item);

    this.tags.push(item);

    this.value=''
  }

  delete(item) {  
    console.log(item);
    this.tags = this.tags.filter(x => x !== item)  
    //this.tags.push(item);    
  }

Answer 1

Вы можете изменить HTML с помощью ngModel, который является двухсторонним связыванием в Angular, и я чувствую, что вам лучше поддерживать независимые поля для ввода и списка тегов

<div contenteditable="true"
     class="border"
     #textbox

     style="border: 2px solid black; min-height:50px; width:300px;" 
     id="txtDiv"
     (keypress)="updateKeyUp($event)" 
     >
     <!---searchTerm$.next($event.target.value)-->
     <div>
        <span           
          class="box-tag"
         *ngFor="let tag of tags">                    
          {{tag.name}}          
          <b class="close" (click)="delete(tag)">x</b>
        </span>
     </div>
 </div>
 <input [(ngModel)]="nameModel" (keypress)="updateKeyUp($event)" placeholder="Enter Tag Name">{{this.nameModel}}
<ul *ngIf="results">
  <li *ngFor="let result of results | slice:0:9" (click)="add(result)">
    <a href="{{ result.latest }}" target="_blank">
      {{ result.name }}
    </a>     
  </li>
</ul>

Демо Здесь