результаты поиска в текстовом поле с крестиком

Question

update1:

эй, спасибо за ваш ответ ... но когда я набираю h, он показывает набор значений .... и когда я выбираю значение, оно должно отображаться в текстовом поле с крестиком .... как в stackoverflow мы редактируем теги

У меня есть код поисковой системы в angular2. Когда я выбираю результаты поиска, мне нужно отобразить значения в текстовом поле с крестиком рядом с ним. Прямо сейчас я получаю результаты. Но когда я выбираю значения, как отображать в текстовом поле крестик.

https://stackblitz.com/edit/angular6-ya3e4u?file=app/app.component.html

сервис

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class SearchService {
  baseUrl: string = 'https://api.cdnjs.com/libraries';
  queryUrl: string = '?search=';

  constructor(private http: Http) { }

  search(terms: Observable<string>) {
    return terms.debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term));
  }

  searchEntries(term) {
    return this.http
        .get(this.baseUrl + this.queryUrl + term)
        .map(res => res.json());
  }
}

HTML

<input
    (keyup)="searchTerm$.next($event.target.value)">

<ul *ngIf="results">
  <li *ngFor="let result of results | slice:0:9">
    <a href="{{ result.latest }}" target="_blank">
      {{ result.name }}
    </a>
  </li>
</ul>

<div class="close" (click)="delete(currentItem)">X</div>

Answer 1

Попробуйте следующий код, он вам поможет. Демо StackBlitz

<input
    (keyup)="searchTerm$.next($event.target.value)">

<ul *ngIf="results">
  <li *ngFor="let result of results | slice:0:9">
    <a href="{{ result.latest }}" target="_blank">
      {{ result.name }}
    </a>
    <div class="close rigth" (click)="delete(result)">X</div>
  </li>
</ul>