Angular 角度搜索表单-仅在找到元素时显示选项列表

我制作了一个搜索表单，将找到的元素传递给我的FormControl。过滤器工作正常，但问题是始终显示完整的选项列表，我希望只有在我开始键入并匹配某些元素后才显示该列表，并具有单击这些元素以选择它们的选项

search-input.html

<div class="form-group row" [formGroup]="group">
  <label class="col-sm-4 col-form-label">{{label}}</label>
  <div class="col-sm-8">
    <input type="search" [(ngModel)]="model" [formControlName]="controlName" placeholder="Search text" class="form-control search-wrapper">
  </div>
</div>
<ul *ngFor="let data of options | filter: model">
  <li>{{data}}</li>
</ul>

过滤管

transform(items: any[], model: string): any[]  {
    if (!items) {
      return [];
    }
    if (!model) {
      return items;
    }
    model = model.toLocaleLowerCase();

    return items.filter(it => {
      return it.toLocaleLowerCase().includes(model);
    });
  }

---

使用

ngIf

，在模型为空时隐藏列表。使用条件

model.length

，我们仅在模型至少有1个字符时显示列表。此时，过滤管将启动并显示过滤结果

<ul *ngIf="model && model.length">
  <li *ngFor="let option of options | filter: model">
    <button (click)="handleClick(option)">{{option}}</button>
  </li>
</ul>

由于

model

是一个字符串，并且是一个返回数字的属性，因此当

model.length

大于零时，我们可以将其断言为真实值。否则，如果长度为零，则为falsy值

---

并且为了解决模型未定义的问题，可以将其初始化为空字符串，或者考虑将条件检查扩展到<代码>模型&模型>长度>代码> ./p>在过滤器中设置断点，我认为它不工作。告诉我们，它是否正确过滤？@JohnPeters正如我在帖子中所说，过滤器确实工作正常。它工作正常，但当我第一次进入控制台TypeError时加载页面时除外：在按下任何键之前无法读取undefined的属性'length'，也正因为如此，serachbox后面显示的元素没有任何标签（我在该页面上使用其他形式的输入）。按任意键后，一切都恢复正常。好的，有意义。试一试

*ngIf=“model&&model.length”

很好，效果非常好，thinkg唯一剩下的就是能够从列表中选择搜索框中的选项，因为此时即使找到匹配项，我们也无法选择，并且信息可能发送不完整。您应该能够为

中的元素分配一个单击事件处理程序。例如，使用带有单击事件的按钮来设置模型。这将使用用户选择填充搜索字段。使用{{data}}，其中onSelect（data:string）{This.model=data；}不起作用，我无法选择元素。

<ul *ngIf="model && model.length">
  <li *ngFor="let option of options | filter: model">
    <button (click)="handleClick(option)">{{option}}</button>
  </li>
</ul>

handleClick(option) {
  this.model = option;
}