时间戳

首页 > 解决方案 > 悬停时角度2扩展选择

angular - 悬停时角度2扩展选择

问题描述

我们有一个包含许多 mat-selects 的表单（基本上是下拉菜单）。我们使用这些，因此我们不必进行痛苦的验证，因为用户无法输入垃圾。他们只能选择一个有效值。现在用户抱怨他们必须滚动浏览这么多项目才能找到合适的项目。我们希望通过仅显示他们最有可能/通常 90% 的时间使用的选项来改进这一点，并且仅当它们悬停在名为“显示更多”或类似内容的最后一个选项上时才显示其他选项。我在 stackblitz 上有一个基本的骨架设置。欣赏任何指针/工作代码。完全卡住了。这与延迟加载无关。只是视觉上的诡计。 https://stackblitz.com/edit/angular-showmo

标签： angularangular-material

解决方案

这样的事情应该做你需要做的事情。

https://stackblitz.com/edit/angular-showmo-nftpk7?embed=1&file=app/select-overview-example.html

将禁用的布尔值添加到接口

export interface Food {
  value: string;
  viewValue: string;
  disabled: boolean;
}

定义默认食物数组

foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak', disabled: false },
    { value: 'pizza-1', viewValue: 'Pizza', disabled: false },
    { value: 'tacos-2', viewValue: 'Tacos', disabled: false },
    { value: 'showSpecials', viewValue: 'Show Specials', disabled: true },
  ];

addSpecials(food)if 追加新值的方法food.value == 'showSpecials'。

 addSpecials(food) {
    if (food.value == 'showSpecials') {
      this.foods.push(
        { value: 'pizza-special-1', viewValue: 'PizzaSpecial', disabled: false },
        { value: 'tacos-2-special-2', viewValue: 'TacosSpecials', disabled: false }
      )
    }
  }

html 禁用特价选项并调用addSpecials()鼠标输入。

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-select placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled" (mouseenter)="addSpecials(food)">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

推荐阅读