Блог

Главная - Вопросы по программированию - Угловой материал; mat-выбрать отображение выбранного цвета

Угловой материал; mat-выбрать отображение выбранного цвета

#html #css #angular #angular-material

#HTML #css #угловой #угловой-материал

Вопрос:

У меня есть этот фрагмент кода для отображения списка цветов, которые могут быть выбраны пользователем:

 <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'}
];
}

Это работает так, как вы видите на изображении ниже. Но я не знаю, как отобразить выбранный цвет в элементе управления мат-выбор.

введите описание изображения здесь

ДЕМОНСТРАЦИЯ

Комментарии:

1. можете ли вы связать stackblitz?

2. Да, я изменил свой вопрос, и вы можете найти ссылку там

3. итак, если пользователь выберет первое значение, которое вы хотите отобразить «FFFFFF» в поле выбора?

4. Нет, мне нужно показать сам цвет вместо метки

5. итак, как и в выпадающем списке, мы можем видеть только цвет, который ведет себя так же после выбора, правильно?

Ответ №1:

Если вы хотите настроить выбранное значение, это селектор, который вы можете использовать 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>

ДЕМОНСТРАЦИЯ

Ответ №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>