Angular форма поиска - показывать список опций только тогда, когда элементы найдены

Question

Я создал форму поиска, которая передает найденный элемент в мой 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>

search-input.ts

@Input() label: string;
@Input() group: string;
@Input() model: string;
@Input() controlName: string;
@Input() options: string[];

filter -pipe.ts

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);
    });
  }

Answer 1

Используя 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>

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

Поскольку model является строкой, а length является свойством, которое возвращает число, мы можем утверждать, что model.length является истинным значением, когда оно больше нуля. В противном случае, если длина равна нулю, это ложное значение.

И чтобы решить проблему неопределенности модели, вы можете инициализировать ее пустой строкой или рассмотреть возможность расширения условной проверки до model && model.length.