angular material 动态菜单内容未显示

Question

我是 angular 的新手，我正在努力获得一个包含文本输入字段的组件，一旦输入超过 3 个字符，就会调用服务以在数据库和 return 在弹出菜单中用于选择的项目数组。

我已经准备好服务并且 return 正在适当地调整，菜单项在我想要的时候弹出，在我想要的时候消失，但是我无法让菜单出现了解任何内容。它总是弹出一个空框。我能够让 mat-menu 在我的应用程序的其他地方作为上下文菜单工作并且看起来很好，所以我不确定我在这个菜单上遗漏了什么。有人知道哪里出了问题吗？

模板代码：

  <div>
    <mat-menu #searchResultMenu="matMenu" yPosition="above" *ngIf="searchResults.length > 0">
      <ng-template matMenuContent let-searchResults="searchResults">
        <button mat-menu-item *ngFor="let sritem of searchResults" (click)="findAndSelect(sritem)">
          {{sritem.displayName}}
        </button>
      </ng-template>
    </mat-menu>

    <!-- div below is really just there so I can open/close the menu 
         in typescript code rather than with a visual UI component action. 
    -->
    <div #menuTrigger [matMenuTriggerFor]="searchResultMenu" [matMenuTriggerData]="searchResults"></div>

    <mat-form-field>
      <mat-label>Search String</mat-label>
      <input matInput type="text" [value]="searchString" (input)="searchStringChanged($event)">
      <button *ngIf="searchString" matSuffix mat-icon-button aria-label="Clear" (click)="searchString=''">
        <mat-icon>clear</mat-icon>
      </button>
    </mat-form-field>
  </div>

typeScript 代码：

@ViewChild(MatMenuTrigger) menuTrigger: MatMenuTrigger;
public searchResults: SearchResultItem[];

* * *

  searchStringChanged(ev:Event) {
    this.searchString = <string>((<any>ev.target)?.value);

    if (this.searchString?.length > 3) {
      this.myservice.getSearchResults(this.searchString).subscribe(data => {
        <!-- prove to myself I'm getting a result set: -->
        console.log("search returned results: ", data);

        if (data.length > 0) {
          this.searchResults = data;
          this.menuTrigger.menuData = this.searchResults;
          this.menuTrigger.openMenu();
        }
      });
    }
  }
 
  clearSearchString() {
    this.searchString = "";
    this.searchResults = [];
    this.menuTrigger.closeMenu();
  }

  findAndSelect(sritem: SearchResultItem) {
    console.log("Searching for item named: ", sritem.displayName);
    this.menuTrigger.closeMenu();
  }

* * *

searchResult 是从我的服务 return 中获取的一组 SearchResultItem 对象，我已经验证它在菜单出现时被填充，并且每个对象都包含一个名为 'displayName' 的参数，即一个字符串。

提前致谢。

附加信息：

我在 UI 中看到的内容： UI screenshot

我在调试控制台中看到的内容return来自我的服务： debug console screenshot

Answer 1

删除 let-searchResults="searchResults" ，它将起作用

Answer 2

虽然上面回答了我最初的问题，但我还弹出了一些其他运行时间的错误，即使 UI 运行良好。我最终找到了它们并将我原来的 post 清理到下面的内容。只是想我会添加这个，以防其他人试图复制我最初 posted 的代码...改为在下面使用。基本上，我从我的 mat-menu 标签中删除了 ngIf 并相应地更新了模板和打字稿中的组件，以及原始问题解决方案的更改。

非常感谢 Faizal 的 comments/answer。

模板代码：

  <div>
    <mat-menu #searchResultMenu="matMenu" yPosition="above">
      <ng-template matMenuContent>
        <button mat-menu-item *ngFor="let sritem of searchResults" (click)="findAndSelect(sritem)">
          {{sritem.displayName}}
        </button>
      </ng-template>
    </mat-menu>

    <div style="visibility: hidden; position: fixed" [matMenuTriggerFor]="searchResultMenu">
    </div>

    <mat-form-field>
      <mat-label>Search String</mat-label>
      <input matInput type="text" [value]="searchString" (input)="searchStringChanged($event)">
      <button *ngIf="searchString" matSuffix mat-icon-button aria-label="Clear" (click)="searchString=''">
        <mat-icon>clear</mat-icon>
      </button>
    </mat-form-field>
  </div>

打字稿代码：

@ViewChild(MatMenuTrigger) searchResultMenu: MatMenuTrigger = <MatMenuTrigger><unknown>null;
public searchResults: SearchResultNode[] = [];

* * *

  searchStringChanged(ev:Event) {
    this.searchString = <string>((<any>ev.target)?.value);

    if (this.searchString?.length > 3) {
      this.myservice.getSearchResults(this.searchString).subscribe(data => {
        <!-- prove to myself I'm getting a result set: -->
        console.log("search returned results: ", data);

        if (data.length > 0) {
          this.searchResults = data;
          this.searchResultMenu.menuData = this.searchResults;
          this.searchResultMenu.openMenu();
        }
      });
    }
  }
 
  clearSearchString() {
    this.searchString = "";
    this.searchResults = [];
    this.searchResultMenu.closeMenu();
  }

  findAndSelect(sritem: SearchResultItem) {
    console.log("Searching for item named: ", sritem.displayName);
    this.searchResultMenu.closeMenu();
  }

* * *

angular material 动态菜单内容未显示

angular material dynamic menu content not showing up

menu

dynamic

angular-material

angular