Угловой материал; mat-select отображать выбранный цвет
У меня есть этот фрагмент кода для отображения списка цветов, которые может выбрать пользователь:
<form>
<h4>mat-select</h4>
<mat-form-field appearance = "fill">
<mat-label>Favorite Color</mat-label>
<mat-select [(ngModel)] = "selectedValue" name = "food">
<mat-option *ngFor = "let color of allColors" [value] = "'#' + color.value">
<!-- {{color.label}} -->
<span class = "color-span" [ngStyle] = "{ 'background-color': '#' + color.value }"></span>
</mat-option>
</mat-select>
</mat-form-field>
</form>
import {Component} from '@angular/core';
/**
* @title Select in a form
*/
@Component({
selector: 'select-form-example',
templateUrl: 'select-form-example.html',
})
export class SelectFormExample {
public allColors: any[] = [
{label: 'FFFFFF', value: 'FFFFFF'},
{label: '000000', value: '000000'},
{label: '603813', value: '603813'},
{label: 'FF0000', value: 'FF0000'},
{label: '2E3192', value: '2E3192'},
{label: '006837', value: 'FFD400'},
{label: 'F15A24', value: 'F15A24'},
{label: 'CCCCCC', value: 'CCCCCC'},
{label: 'DBC0B5', value: 'DBC0B5'},
{label: 'FAB49B', value: 'FAB49B'},
{label: '87B2C7', value: '87B2C7'},
{label: 'ACD58A', value: 'ACD58A'},
{label: 'FFF9AE', value: 'FFF9AE'}
];
}
Это работает, как вы видите на изображении ниже. Но я не знаю, как отобразить выбранный цвет в элементе управления mat-select.
Да, я изменил свой вопрос, и вы можете найти ссылку там
поэтому, если пользователь выберет первое значение, которое вы хотите отобразить «FFFFFF» в поле выбора?
Нет, мне нужно показать сам цвет вместо метки
Итак, как и в раскрывающемся списке, мы можем видеть цвет только таким же образом после выбора, правильно?
Да, я просто хочу отображать цвет, а не шестнадцатеричный код
Ответы 2
mat-select устанавливает значение и отображает метку выбранного вами mat-option, однако он будет отображать только текст из этого выбора, поскольку вы не показываете текст в своих метках, ничего не отображается при выборе одного из вариантов.
Вы можете добавить метку для своего цвета в элементы mat-option, а затем, как только вы выберете что-то, этот текст появится в элементе mat-select. Если вам нужно визуальное представление цвета — вы можете показать значение за пределами элемента mat-select (может быть, справа?).
Вы также можете рассмотреть возможность изменения метки в вашем массиве с шестнадцатеричного значения на имя цвета, например. {label: 'FFFFFF', value: 'FFFFFF'}, к {label: 'White', value: 'FFFFFF'},
Вот фрагмент, который показывает предложение:
<mat-select [(ngModel)] = "selectedValue" name = "food">
<mat-option *ngFor = "let color of allColors" [value] = "'#' + color.value">
<!-- {{color.label}} -->
<span class = "color-span" [ngStyle] = "{ 'background-color': '#' + color.value }"></span>
{{ color.label }}
</mat-option>
</mat-select>
Если вы хотите настроить выбранное значение, это селектор, который вы можете использовать mat-select-trigger. Это позволяет вам настроить триггер, который отображается, когда выбор имеет значение.
Ссылка:- https://material.angular.io/components/select/api
Вы можете изменить свой код, как показано ниже, чтобы отображать цвет, когда пользователь выбирает значение.
<mat-select [(ngModel)] = "selectedValue" name = "food">
<mat-select-trigger>
<span [ngStyle] = "{ 'background-color': selectedValue }"/>
</mat-select-trigger>
<mat-option *ngFor = "let color of allColors" [value] = "'#' + color.value">
<!-- {{color.label}} -->
<span class = "color-span" [ngStyle] = "{ 'background-color': '#' + color.value }"/>
</mat-option>
</mat-select>
можешь связать стекблиц?