Question

我们有一个带有很多选择垫的表格（基本上是下拉菜单）。我们使用了这些，因此我们不必进行痛苦的验证，因为用户无法输入垃圾。他们只能选择一个有效值。现在，用户抱怨他们必须滚动许多项才能找到正确的项。我们希望通过仅显示它们最有可能/通常在90％的时间内使用的那些选项并仅当它们悬停在称为“显示更多”或类似内容的最后一个选项上时，才显示其他选项来改善此问题。我在stackblitz上有一个基本的骨骼设置。感谢任何指针/工作代码。完全卡住了。这与延迟加载无关。只是视觉欺骗。 https://stackblitz.com/edit/angular-showmo

Answer 1

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

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)方法，用于在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>

Answer 2

我有一些想法，这只是一个伪代码，只是为了说明。我将选项列表分为频繁选项和休息选项。然后在mat-option下有三个不同的mat-select标签。

第一个显示频繁使用的项目，第二个显示悬停选项show more，第三个显示其余选项。

在show more mat-option上使用悬停事件以启用第二组mat-option：

<mat-select placeholder="Favorite food">
                            <mat-option *ngFor="let food of foodsFrequent" [value]="food.value">
                              {{food.viewValue}}
                            </mat-option>
                            <mat-option *ngIf("showMore == false") (hover) = "setTrueShowMore">Show more</mat-option>
                            <mat-option *ngIf("showMore") *ngFor="let food of foodsRest" [value]="food.value">
                                {{food.viewValue}}
                              </mat-option>
</mat-select>

Answer 3

这与您首先使用选择框的理由背道而驰-用户应该在大多数情况下都知道他们想要的值，而无需知道或看到所有替代方法。

用户应该能够输入一些字母，将其带到要使用的选项或选项区域。

如果您真的想将其作为“显示更多”的实现方式，建议改用单选按钮，因为可以通过可单击的链接或按钮轻松隐藏/显示这些按钮，并且在以下情况下也很有用用户需要查看所有可能的选项并做出决定。

如果您的列表太长了，您可以做2个选择框，其中一个被隐藏，并带有显示更多按钮来显示它。

悬停时角度2扩展选择

3 个答案: