在</li>标签内循环播放的click / routerlink无法正常工作Angular 6

Question

所以我有一个搜索栏，上面有这样的建议列表

该列表来自数据循环，并用指向搜索结果的参数链接包装。我同时使用click事件和routerLink，但鼠标和触摸板单击无法正常工作。仅当我单击“ Enter”时有效，并且在自适应模式和移动网络上也有效。

我尝试使用点击

HTML

<ul>
    <li (click)="clickSearch(item.name)" *ngFor="let item of searchBarResults | slice:0:5;">
       <span class="highlight">{{ item.name }}</span>
    </li>
</ul>

打字稿

public clickSearch(keyword) {
    const queryParams = {
      st: 'product',
      q: keyword,
      premium: 'All',
      location: 'All',
    };
    this._router.navigate(['/search-result/product-list'], { queryParams: queryParams });
}

也尝试使用routerLink

<ul>
    <li *ngFor="let item of searchBarResults | slice:0:5;">
        <a href="#" [routerLink]="['/search-result/product-list']" [queryParams]="{st: 'product',q: item.name,premium: 'All', location: 'All'}">
           <span class="highlight">{{ item.name }}</span>
        </a>
     </li>
</ul>

它们都不能在鼠标/触摸板上单击，但是它们都可以在响应模式下正常工作，而且当我通过移动设备单击时，我也都假设来自CSS的错误，但还没有弄清楚

这是搜索栏上的完整html，仅包含建议

<div class="search__wrapper">
     <input type="text" [(ngModel)]="keywordSearch" class="search__input" (keyup.enter)="onSearchSubmit()(keyup)="searchK($event)" (focus)="showSearch = true"(focusout)="onSearchFocusOut()" placeholder="Cari produkmu disini">
            <fa-icon *ngIf="keywordSearch !== ''" class="deleteIcon" [icon]="['fas', 'times-circle']" (click)="clearSearch()"></fa-icon>

      <div class="list-suggestion" [ngClass]="{'show-element': showSearch === true, 'hide-element': showSearch === false}">
           <div class="product-suggestion">
                <ul>
                     <li (click)="onSearchSubmit()"><span class="highlight">{{ keywordSearch }}</span></li>
                </ul>
           </div>

           <div class="product-suggestion" *ngIf="searchBarResults.length > 0">
                <div (click)="ClickSuggestion(suggestion.id,suggestion.field)" class="suggestion-block" style="cursor:pointer;border: 1px solid #f1f1f1;" *ngIf="suggestion !== ''">
                    <h5 style="color:grey; font-weight:bold;">Suggestion</h5>
                     <span class="suggestion-label">{{suggestion.field}}</span>
                     <span  class="highlight">{{ suggestion.text }}</span>
                </div>
                <ul>
                    <li (click)="clickSearch(item.name)" *ngFor="let item of searchBarResults | slice:0:5;">
                        <span class="highlight">{{ item.name }}</span>
                    </li>
                 </ul>
                 <!-- <ul>
                          <li *ngFor="let item of searchBarResults | slice:0:5;">
                               <a href="#" [routerLink]="['/search-result/product-list']" [queryParams]="{st: 'product',q: item.name,premium: 'All', location: 'All'}">
                                   <span class="highlight">{{ item.name }}</span>
                                </a>
                          </li>
                     </ul> -->
            </div>
        </div>
        <button class="search__button" (click)="onSearchSubmit()">
                <fa-icon class="search__icon" [icon]="['fas', 'search']"></fa-icon>
        </button>
</div>

也是CSS

.list-suggestion {
    position: absolute;
    z-index: 99;
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.14);
    border: solid 1px #ddd;
    border-top: none;
    font-size: 13px;
    color: #333;
    width: 100%;
    top: 4.5rem;
}

.product-suggestion {

    .suggestion-block {
        width: 100%;
        padding: 7px 20px;

        .suggestion-label {
            width: 70%;
            vertical-align: middle;
            padding-right: 10px;
            font-size: 12px;
            font-weight: 400;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: normal;
            color: #999;
            text-transform: uppercase;
            font-family: Lato;
        }
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            padding: 7px 20px;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;


            &:hover {
                color: #fff;
                background-color: #23303d;

                .highlight {
                    color: #fff;
                }
            }
        }
    }

    .highlight {
        font-weight: 700;
        color: #000;
    }
}

我已经在Google上进行搜索，并尝试了所有方法，但似乎没有任何效果。

对不起，如果我犯了愚蠢或有趣的错误，因为早期开发人员编写的大多数代码都在我之前工作，而我仍然在学习。

感谢任何帮助，谢谢！