如何从搜索结果中选择单击的元素并删除 angular4 中的兄弟姐妹答案

【问题标题】：How to select clicked element from search result and remove the siblings in angular4如何从搜索结果中选择单击的元素并删除 angular4 中的兄弟姐妹
【发布时间】：2018-04-25 11:57:04
【问题描述】：

我正在从搜索框中获取元素数组作为搜索结果，单击时我想在搜索框中获取单击的元素并删除剩余的兄弟 li。不知道如何使用 angular 来实现它。

感谢您的时间和帮助。

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

【问题讨论】：

标签： angular jquery-ui angular4-forms angular4-httpclient

【解决方案1】：

它应该是 product.id 和 product.name，因为在 ngFor 中你使用 product 作为变量。

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

另外，要隐藏所有链接，您可以选择SearchTest id 并将display:none; 应用到它。并且每当编辑输入字段时，您都可以使 SearchTest id 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
}

【讨论】：

对不起，因为我是新手，所以不确定我们该怎么做，如果你能告诉我应该在哪里放置 display none 以及何时放置 display:block for li 以便隐藏剩余的li;
更新了答案。希望这对您有所帮助。
在angular4中可以这样写。因为我的组件中有单独的 getproducts 和 searchproducts。
是的，你可以做到。有多种方法可以实现您想要的。该方法无需对 ts 文件进行过多处理即可实现。而只是在 dom 上玩。

【解决方案2】：

模板
使用 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 = [];
}

【讨论】：