Angular MatMenuTrigger以编程方式打开

我见过类似的答案，但在尝试实现@ViewChild时会出现错误

见问题

我有一个组件，它有一个搜索栏和一个名称列表。搜索栏将适当地过滤列表中的名称，但我希望只有在搜索栏中有数据后才能显示列表

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>

材料与技术

peoplemenu: MatMenu;

如果我添加到materials.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"

在输入搜索栏中，当我在搜索栏中键入时，它会显示菜单，但随后过滤器不再工作，因为焦点在菜单中

---

目标是有一个搜索栏，它将触发菜单，但也会过滤菜单

您应该获得MatMenuTrigger的参考，如下所示

@ViewChild('peoplemenu', { static: true }) trigger: MatMenuTrigger;

然后，您可以在AfterViewInit生命周期中访问触发器，以便首次设置状态

@ViewChild('peoplemenu', { static: true }) trigger: MatMenuTrigger;