Как выбрать выбранный элемент из результатов поиска и удалить братьев и сестер в angular4

Question

Я получаю массив элементов в качестве результата поиска из окна поиска, при щелчке я хочу, чтобы щелкнуть элемент в моем окне поиска и удалить оставшуюся сестру li. Не уверен, как я могу добиться этого, используя угловой.

Спасибо за ваше время и помощь.

<div id="search-component">
        <input type="text" class="searchBox"
            placeholder="Search here..." #searchBox id="searchBox"
            name="searchBox" (keyup)="searchproducts(searchBox.value)" />
            <ul id= "SearchTest" class="search-result" *ngFor="let product of products?.searchData| slice:0:4">
           <li (click)="getproducts(product.id);searchBox.value = product.name;">{{product.name}}</li></ul>
    </div>

Answer 1

Template
Используйте ngModel, чтобы показать название выбранного продукта.

<div id="search-component">
        <input [(ngModel)]="selectedItem" type="text" class="searchBox"
            placeholder="Search here..." #searchBox id="searchBox"
            name="searchBox" (keyup)="searchproducts(searchBox.value)" />
            <ul id= "SearchTest" class="search-result" *ngFor="let product of products?.searchData| slice:0:4">
           <li (click)="getproducts(products.id);searchBox.value = products.name;">{{products.name}}</li></ul>
    </div>

Класс
Очистите массив, чтобы скрыть все предложения.

getproducts(products.id) {
 this.selecteItem = products.name;
 this.products = [];
}

Answer 2

Это должны быть product.id и product.name, так как в ngFor вы использовали продукт в качестве переменной.

<li (click)="getproducts(product.id);searchBox.value = product.name;">{{product.name}}</li></ul>

Также, чтобы скрыть все ссылки, вы можете выбрать SearchTest id и применить display:none; к нему.И всякий раз, когда поле ввода редактируется, вы можете сделать идентификатор SearchTest display:block;

Редактировать 1:

getproducts(id){
    document.getElementById('SearchTest').style.display = "none";
    // your code here
}

searchproducts(value){
   document.getElementById('SearchTest').style.display = "block";
   // your code here
}