Angular Material Select установить первый вариант по умолчанию

Я хочу установить значение «пицца-1» поверх опции выбора, массив является переменным, и я не могу создать массив заказов. Поэтому для меня важно сделать это из html-шаблона. Есть ли способ указать параметр, который будет первым по умолчанию?

Файл компонента

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent  {
  name = 'Angular';
  selected: any = -1;

  foods= [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

}

Шаблон

<mat-form-field>
  <mat-select placeholder = "Favorite food">
    <mat-option *ngFor = "let food of foods" [value] = "food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

angular angular-material

09.12.2020 19:45

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

172

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

К сожалению, в Select нет способа установить конкретное значение в качестве первого параметра. Это нужно будет отразить в коде.

Поскольку вы не получаете упорядоченный массив, вам придется его создать. Один из способов сделать это - создать второй массив. Вставьте в него объект с пиццей-1, а затем остальные объекты.

10.12.2020 10:17

Ответ принят как подходящий

Я думаю, что если вы пытаетесь заказать мат-опции из заданного массива объектов, вам нужно отсортировать массив следующим образом.

В вашем массиве/списке опций измените {value: 'steak-0', viewValue: 'Steak'}, к value: {food: 'Steak', val: 0}, viewValue: 'Steak'},

Почему? Объекты обеспечивают эффективное структурирование данных, а не строк.

foods= [
    {value: {food: 'Steak', val: 0}, viewValue: 'Steak'},
    ....
  ];

Отсортируйте свой массив с помощью JS Sort

this.foods.sort(function(a, b){
  var x = a.value.val.toLowerCase();
  var y = b.value.val.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});

Вот и все!

10.12.2020 10:33

Другие вопросы по теме

Как я могу использовать switchMap вместо вложенных подписок?

Значение ползунка мата в Angular 15

Предупреждение модуля. Темы Angular Material должны создаваться из карты, содержащей цвет ключей, типографику, плотность

Что делает использование партиалов невозможным в этом приложении Angular 14?

Как убедиться, что вложенная группа форм возвращает массив объектов в Angular?

Проблемы после обновления Angular Material с 14 до 15

Ошибка TS2707: универсальный тип «ɵɵDirectiveDeclaration» требует от 6 до 8 аргументов типа

Что делать с наследием после обновления angular v15

Создание темы Angular для Angular 15?

Цвет границы контура поля формы мата

Angular Material Select установить первый вариант по умолчанию

Ответы 2

Другие вопросы по теме

Похожие вопросы