函数未在li上单击angular6？

Question

我正在构建自定义自动完成功能，例如使用angular7进行下拉。我的html中有这个component.html

<div class="wrapper">
<div class="row mt-3">
    <div class="col-6">
        <input type="text" class="form-control" placeholder="text here" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel">
  </div>
    </div>
    <div class="row mt-2" *ngIf="records.length > 0">
        <ul class="suggestion-list">
            <li *ngFor="let record of records" (click)="getNameValue(record)">{{record.name}}</li>
        </ul>
    </div>
</div>
并且在component.ts中我有此代码

records = [];
  selectedName : string = '';
  nameDisplayModel = '';
  users = [
    {name : 'Fahad', value :'fahad'},
    {name : 'Saad', value :'saad'},
    {name : 'Anus', value :'anus'},
    {name : 'Hazik', value :'hazik'},
    {name : 'Ahsan', value :'ahsan'},
    {name : 'Sohaib', value :'sohaib'}
  ]

  
  credentialsSearchFilter(event: any) {
    const val = event.target.value.toLowerCase();
    this.records = this.users.filter(function(d) {
      return d.name.toLowerCase().indexOf(val) !== -1 || !val;
    });
  }
  hideList(){
    this.records = [];
  }
  getNameValue(row){
      console.log('hello')
      this.nameDisplayModel = row.name;
      this.users.forEach(item=>{
        if(item.name === row.name){
          this.selectedName = row.value;
        }
      })
      this.records = [];
      console.log(this.selectedName)
  }

现在我面临3个问题。

第01期在li上，我想执行目前未执行的getNameValue功能，我不知道为什么它没有执行。

第02期当我将鼠标悬停在li上时，在输入框下方的ul中将鼠标悬停css不适用于整个li。它仅适用于li的一小部分。但是我想对整个li元素进行悬停效果。

第03期当我在input中键入任何内容时，当ul显示时，键入input时显示的ul宽度应与输入框的宽度相等。

您可以在实时Stackblitz link中查看所有这3个问题here

我正在构建自定义自动完成功能，例如使用angular7进行下拉。我的component.html中有这个html

＆...

Answer 1

关于第一个问题，您永远不要单击li，因为在此之前您将其隐藏。为什么？因为在(blur)上要删除记录数组，所以ul元素消失了。检查项目的此fork。

Answer 2

问题1：在li上，我想执行getNameValue函数，该函数现在不执行，并且我不知道为什么它没有执行。