html - 仅当使用 Angular 7 关注输入字段时元素的外观

Question

有人可以建议如何仅在选择输入字段 search-form__input 后显示带有过去查询的弹出菜单 suggestions 吗？

search.component.html

<div class="search-form mt-2 input-group mb-2">
  <input appShowSuggestions type="search" class="form-control search-form__input"
         placeholder="Поиск (макс. количество найденных статей - 30)" maxlength="60"
         [(ngModel)]="searchQuery"
         (keyup)="showArticlesKeyup($event)"
         [formControl]="typeahead"
         (input)="suggest()" >
  <div class="input-  group-append">
    <button class="btn btn-outline-secondary search-form__btn" type="submit"
      (click)="showArticles()" [disabled]="searchQuery.trim() === ''">Искать</button>
  </div>
</div>
<div class="suggestions" *ngIf="suggestions.length">
  <small class="text-muted">Ваши прошлые запросы:</small>
  <p class="suggestions__link"
     *ngFor="let suggest of suggestions"
     (click)="searchQuery = suggest; showArticles()"> {{ suggest }}</p>
</div>

search.component.ts

export class SearchComponent implements OnInit {
  constructor(private articleService: ArticleService) { }

  searchQuery = '';
  articles: any[] = [];
  searchQueryCollection: string[] = [];
  suggestions: string[] = [];
  typeahead: FormControl = new FormControl();


  static getUrl(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=opensearch&profile=normal&search='
      + searchQuery + '&limit=30&namespace=0&format=json&origin=*';
  }

  suggest() {
    this.suggestions = Array.from(new Set(this.searchQueryCollection))
      .filter(c => c.startsWith(this.typeahead.value))
      .slice(0, 5);
  }

  ngOnInit() {
  }

  showArticles() {
    this.articleService.getArticles(SearchComponent.getUrl(this.searchQuery))
      .subscribe(
        (data: IArticle) => {
          this.articles = Object.values({ ...data });
          this.searchQueryCollection.push(this.searchQuery);
        }
      );
  }

  showArticlesKeyup(event) {
    if (event.key === 'Enter' && this.searchQuery.trim() !== '') {
      this.showArticles();
    }
  }
}

Answer 1

<input appShowSuggestions type="search" class="form-control search-form__input"
         placeholder="Поиск (макс. количество найденных статей - 30)" maxlength="60"
         [(ngModel)]="searchQuery"
         (keyup)="showArticlesKeyup($event)"
         [formControl]="typeahead"
         (input)="suggest()" >

一个建议是添加 (focus)="toggleSuggestions()" 然后切换建议如下所示:

toggleSugestions = () => this.showSuggestions = !this.showSuggestions;

然后您可以将 ng if 更改为类似以下内容:

<div class="suggestions" *ngIf="showSuggestions && suggestions.length">