угловые 2 выдвигаются при наведении

Question

У нас есть форма с множеством матов (в основном выпадающие списки).Мы используем их, поэтому нам не нужно выполнять болезненные проверки, поскольку пользователи не могут вводить ненужные файлы.Они могут выбрать только правильное значение.Теперь пользователи жалуются на то, что им приходится прокручивать так много элементов, чтобы найти нужный.Мы хотим улучшить это, показывая только те опции, которые они, скорее всего, / обычно используют 90% времени, и отображать дополнительные опции, только если они наводятся на последнюю опцию, которая называется «показать больше» или что-то в этом роде.У меня есть базовая настройка скелета на стеклец.Цените любые указатели / рабочий код.Полностью застрялЭто никак не связано с отложенной загрузкой.Просто визуальный обман.https://stackblitz.com/edit/angular-showmo

Answer 1

Это идет вразрез с рассуждением о том, что в первую очередь вы бы использовали поле выбора - пользователь должен знать, какое значение он хочет по большей части, и ему не нужно знать или видеть все альтернативы.

Пользователи должны иметь возможность вводить несколько букв, переводя их в параметр или область параметров, которые они хотят использовать.

Если вы действительно хотите сделать это как реализацию «показать больше», я бы предложил перейти кВместо этого переключатели могут быть легко скрыты / показаны с помощью кликабельной ссылки или кнопки, а также полезны в том случае, если пользователю необходимо просмотреть все возможные варианты и принять решение.

Если ваш списокслишком долго для этого, вы можете сделать 2 поля выбора, один скрытый и с кнопкой показать больше, чтобы отобразить его.

Answer 2

Что-то вроде этого должно делать то, что вам нужно.

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 3

У меня есть некоторые мысли, это просто псевдокод, просто для иллюстрации. Я бы разделил список опций на частые и остальные.Затем добавьте три разных тега mat-option в поле mat-select.

Во-первых, будут отображаться часто встречающиеся элементы, во-вторых, будет опция наведения show more, а на третьем будут остальные параметры.

Используйте событие наведения на show more * 1009.* чтобы включить второй набор 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>