角度材料動態菜單內容未顯示

Question

我是 angular 的新手，我正在努力讓一個組件就位，其中包含一個文本輸入字段，一旦輸入超過 3 個字符，就會進行服務調用以在數據庫中搜索數據並返回一組項目在彈出菜單中用於選擇。

我有服務並適當返回，菜單項在我想要的時候彈出，在我想要的時候消失，但我無法讓菜單提供任何內容。 它總是作為一個空框彈出。 我能夠讓 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>

打字稿代碼：

@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 是從我的服務返回的 SearchResultItem 對象數組，我已經驗證它在菜單出現時填充，並且每個對象都包含一個名為“displayName”的參數，它是一個字符串。

提前致謝。

附加信息：

我在 UI 中看到的內容： UI 屏幕截圖

我在服務返回的調試控制台中看到的內容：調試控制台屏幕截圖

Answer 1

刪除 let-searchResults="searchResults" ，它將起作用

Answer 2

雖然上面回答了我最初的問題，但我還有一些其他的運行時錯誤，即使 UI 運行良好。 我最終找到了他們並將我的原始帖子清理到下面的內容。 只是想我會添加這個以防其他人試圖復制我最初發布的代碼......改用下面的代碼。 基本上，我從我的 mat-menu 標簽中刪除了 ngIf，並相應地更新了模板和打字稿中的組件，以及原始問題解決方案的更改。

非常感謝 Faizal 的評論/回答。

模板代碼：

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

* * *