在输入字段中输入 3 个字符后如何显示 mat-menu？

Question

我正在实现这个输入字段，这样当我输入 3 个字符时，我想将 mat-menu 显示为 mat-option 的值，但由于某种原因，mat-menu 永远不会显示。谁能指出我正确的方向？提前非常感谢！

这里是LIVE DEMO

<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngIf="isSpinnerLoading">

  <div *ngIf="!menuContent">Loading...</div>
  <div *ngIf="menuContent">
    show menu

    <mat-menu #menu="matMenu" class="menu-select">
            <div (click)="$event.stopPropagation()">
                <div *ngFor="let item of myList">
                    <mat-checkbox
                        class="mat-menu-item">
                        {{item}}
                    </mat-checkbox>
                </div>
            </div>
        </mat-menu>
  </div>
    </mat-option>
</mat-autocomplete>

这就是我想要完成的：

Answer 1

问题

您面临的问题是您的内容打开时没有触发mat-menuopenMenu()函数

解决方案

我们需要一种方法来触发菜单打开 以下是我使用过的一种方法

在您的 html 中添加以下标记

<span #menuTrigger="matMenuTrigger"  [matMenuTriggerFor]="menu">show menu</span>

在您的 TS 文件下面添加 @ViewChild 属性以保存 matMenuTrigger

  @ViewChild("menuTrigger", { static: false }) set menuTrigger(
    content: MatMenuTrigger
  ) {
    if (content) {
      this.contentPlaceholder = content;
    }
  }

最后修改你的onKeyUp()函数

  onKeyUp() {
    if (this.currentText.length >= 3) {
      console.log("testing");
      this.isSpinnerLoading = true;
      this.menuContent = false;
      setTimeout(() => {
        this.menuContent = true;
      }, 2000);
      setTimeout(() => {
        this.contentPlaceholder.openMenu();
      }, 2001);
    } else {
      this.isSpinnerLoading = false;
    }
  }

请注意，我们在this.menuContent() 变为真后触发openMenu()

See Demo

Answer 2

1. 不需要使用mat-menu，可以使用mat-checkbox作为选项。
2. ngFor 必须在 mat-option 元素上使用，否则，在当前实现中，您最终将得到一个选项。
3. 加载指示器 (Loading...) 可以显示为禁用的垫选项。
4. 为了启用多项选择，该项目应该是一个具有布尔值的对象，该布尔值指示该项目是否被选中。

这是 stackblitz 的 link。它并不完美，但可以提供帮助。