Я видел похожие ответы, но получаю ошибки при попытке реализовать @ ViewChild
См. Проблему 53792202
У меня есть компонент с панелью поиска и список имен. Панель поиска будет соответствующим образом фильтровать имена в списке, но я хочу, чтобы список отображался ТОЛЬКО после того, как в строке поиска появятся данные.
component. html
<input class="col-6 form-control searchbar" id="SearchBar" placeholder="Search by name" value="" autofocus [(ngModel)]="searchTerm" (input)="searchTerm ? addQueryParams({search: searchTerm}) : addQueryParams({search: null})">
<button mat-button [matMenuTriggerFor] = "peoplemenu">People</button>
<mat-menu #peoplemenu = "matMenu" layout="row" >
<button mat-menu-item *ngFor="let person of people | search: searchTerm as result; let i = index" [value]="person.name" class="usernames" (click)="setPersonValue(person.name)">{{person.name}}</button>
</mat-menu>
component.ts
import { MaterialModule } from '../material/material.module';
constructor(
public materials: MaterialModule,
) { }
materials.ts
peoplemenu: MatMenu;
Если добавить в материалы. ts следующая строка
@ViewChild('peoplemenu') trigger: MatMenuTrigger;
Я получаю сообщение об ошибке: Ожидается 2 аргумента, но есть один.
Я могу избежать этой ошибки, изменив строку на
@ViewChild(MatMenuTrigger, this.peoplemenu) trigger: MatMenuTrigger;
, но получить ошибку: не могу прочитать свойство 'peoplemenu' из неопределенного.
Могу ли я предположить, как-то инициализировать меню? Элементы управления формы и группы форм должны быть инициализированы с помощью
constructor(
private fb: FormBuilder
) { this.addCheckbox(); }
addCheckbox() {
this.checkboxForm = this.fb.group({
'EmployeeName':true,
});
}
, но я не могу найти ссылки на то, как это сделать с меню.
Если я НЕ включаю @ViewChild - начальная кнопка открывает меню
ЕСЛИ я включаю
[matMenuTriggerFor] = "peoplemenu"
в строку поиска ввода, как только я набираю в Панель поиска вызывает меню, но тогда фильтр больше не работает, поскольку фокус находится в меню.
Цель состоит в том, чтобы иметь панель поиска, которая будет вызывать меню, но также и фильтровать меню.