У меня есть mat-select, где параметры - это все объекты, определенные в массиве. Я пытаюсь установить значение по умолчанию для одного из параметров, однако он остается выбранным при отображении страницы.
Мой машинописный файл содержит:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
Мой HTML-файл содержит:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
Я пробовал установить selected2
и value
in mat-option
как для объекта, так и для его идентификатора, и пробовал использовать оба [(value)]
и [(ngModel)]
в mat-select
, но ни один из них не работает.
Я использую материал версии 2.0.0-beta.10.
angular
typescript
angular-material2
Уильям Мур
источник
источник
compareWith
. Это более элегантно.compareWith
БЫТЬ, см. Ответ badis здесь stackoverflow.com/questions/47333171/…Ответы:
Используйте привязку для значения в вашем шаблоне.
должно быть
И в выбранном вами значении используйте
ngModel
вместоvalue
.должно быть
Полный код:
На стороне записки , как в версии 2.0.0-beta.12 в материале выбор в настоящее время принимает
mat-form-field
элемент в качестве родительского элемента , так что согласуются с другим материальным управлением вводом. После обновления заменитеdiv
элемент наmat-form-field
элемент.источник
mat-form-field
, это..."used to wrap several Angular Material components and apply common Text field styles"
, значит, не одно и то же. Кроме этого ОП , а также мой ответ ничего не говоритсяFormControl
,FormGroup
илиFormControlName
.[compareWith]
директива - это то, что мы использовалиИспользуйте
compareWith
функцию, чтобы сравнить значения параметра с выбранными значениями. см. здесь: https://material.angular.io/components/select/api#MatSelectДля объекта следующей структуры:
Определите разметку следующим образом:
И определите функцию сравнения следующим образом:
источник
Я использую Angular 5 и реактивные формы с mat-select и не могу получить ни одно из вышеперечисленных решений для отображения начального значения.
Мне пришлось добавить [compareWith], чтобы иметь дело с различными типами, используемыми в компоненте mat-select. Внутри кажется, что mat-select использует массив для хранения выбранного значения. Это, вероятно, позволит одному и тому же коду работать с несколькими вариантами выбора, если этот режим включен.
Angular Select Control Doc
Вот мое решение:
Конструктор форм для инициализации элемента управления формы:
Затем реализуйте функцию compareWith в своем компоненте:
Затем создайте и экспортируйте функцию defineId (мне пришлось создать отдельную функцию, чтобы mat-select мог ее использовать):
Наконец, добавьте атрибут compareWith в свой mat-select:
источник
Вы должны быть обязательными как
[value]
в ,mat-option
как показано ниже,ЖИВАЯ ДЕМО
источник
Вы можете просто реализовать свою собственную функцию сравнения
[compareWith]="compareItems"
Смотрите также документ . Таким образом, полный код будет выглядеть так:
и в файле Typescript:
источник
i1
иi2
не будет существовать.Как уже упоминалось в Angular 6, использование ngModel в реактивных формах устарело (и удалено в Angular 7), поэтому я изменил шаблон и компонент следующим образом.
Шаблон:
Основные части компонента (
onChanges
остальные детали опускаются):Примечание this.filter.setValue (this.selected) в
ngOnInit
выше.Кажется, работает в Angular 6.
источник
[compareWith]
был отличныйЯ сделал это так же, как в этих примерах. Пытался установить значение mat-select равным значению одного из mat-options. Но не удалось.
Моя ошибка заключалась в том, чтобы сделать [(значение)] = "someNumberVariable" переменной числового типа, в то время как переменные в mat-options были строками. Даже если бы они выглядели одинаково в шаблоне, он не выбрал бы этот вариант.
Как только я проанализировал someNumberVariable в строке, все было полностью в порядке.
Таким образом, кажется, вам нужно, чтобы значения mat-select и mat-option не только были одинаковыми (если вы представляете числа), но также позволяли им быть строкового типа.
источник
Решение для меня было:
TS:
Использование объекта: {id: number, detalle: string}
источник
Попробуй это!
источник
Мое решение немного сложнее и проще.
Я просто использовал заполнитель . Цвет заполнителя материала по умолчанию -
light gray
. Чтобы все выглядело так, как будто опция выбрана, я просто изменил CSS следующим образом:источник
Привязка или установка значения по умолчанию работает, только если атрибут значения в MatSelect сопоставим с атрибутом значения, привязанным к MatOption . Если вы привязываете
caption
свой элемент к атрибуту value элемента mat-option, вы также должны установить элемент по умолчанию в mat-select дляcaption
вашего элемента. Если вы привязываетеId
свой элемент к mat-option , вы должны также привязать егоid
к mat-select , а не к целому элементу, заголовку или любому другому, только к тому же полю.Но делать это нужно с привязкой []
источник
Я очень внимательно следил за вышеизложенным и все еще не мог выбрать начальное значение.
Причина заключалась в том, что хотя мое связанное значение было определено как строка в машинописном тексте, мой серверный API возвращал число.
Свободная типизация Javascript просто изменяла тип во время выполнения (без ошибок), что не позволяло выбрать начальное значение.
Составная часть
Шаблон
Решением было обновить API, чтобы он возвращал строковое значение.
источник
Очень простой способ добиться этого - использовать a
formControl
со значением по умолчанию, например, внутриFormGroup
(необязательно). Это пример использования селектора единиц измерения для ввода области:ts
html
источник
Сравнение числа и строки обычно ложно , поэтому приведите выбранное значение к строке в ngOnInit, и оно будет работать.
У меня была такая же проблема, я заполнил mat-select перечислением, используя
и у меня было значение перечисления, которое я хотел выбрать ...
Я провел несколько часов, пытаясь понять, почему он не работает. И я сделал это сразу после рендеринга всех переменных, используемых в mat-select, коллекции ключей и выбранном ... если у вас есть ["0", "1", "2"] и вы хотите выбрать 1 ( это число) 1 == "1" ложно, и поэтому ничего не выбрано.
Итак, решение состоит в том, чтобы преобразовать выбранное вами значение в строку в ngOnInit, и она будет работать.
источник
Я сделал это.
Обычно вы можете это сделать
[value]="option"
, если только вы не получите свои варианты из какой-либо базы данных ?? Я думаю, что либо задержка получения данных приводит к тому, что он не работает, либо полученные объекты каким-то образом отличаются, даже если они одинаковы? Как ни странно, скорее всего, это более поздний вариант, я тоже пробовал,[value]="option === selected ? selected : option"
но не сработал.источник
TS
HTML
источник
источник