Привязка к ngModel через интерактивные опции вместо опции выбора (выпадающий список)

Question

Я пытаюсь создать базовую палитру цветов с предопределенными цветами.

для этого у меня есть объект "colors" со значениями цвета в качестве его свойств:

public colors = [
    { value: '#ffffff' },
    { value: '#919191' },
    { value: '#555555' },
    // and some more
];

Следуя некоторым примерам в Интернете, я настроил структуру select-option в моем html:

<select name="role" [(ngModel)]="item.color">
  <option *ngFor="let color of colors" [value]="color.value">
     <div class="color-box-modal" [style.background]="color.value"></div>
  </option>
</select>

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

Есть ли альтернатива структуре select-option, которая позволяет мне не иметь выпадающий список, а только несколько цветных полей? Радио-кнопки / флажки также не являются желаемым способом, так как я хочу, чтобы у меня было отдельное поле, по которому можно нажимать, которое реагирует на нажатие.

Если альтернативы нет, возможно ли сделать привязку ngModel одним нажатием кнопки?

---

редактировать:

После тестирования варианта 2 ответа Osman Ceas у меня теперь есть это:

<ng-template #content let-c="close" let-d="dismiss">
      <i class="close icon" (click)="d('Close click x')"></i>
      <div class="header">
        Choose a new color
      </div>
      <div class="content">
        <label for="col1" class="color-box-modal" style="background-color: #ffffff">
          <input (click)="c('#ffffff')" id="col1" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffffff'">
        </label>
        <label for="col2" class="color-box-modal" style="background-color: #ffff00">
          <input (click)="c('#ffff00')" id="col2" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffff00'">
        </label>
        <label for="col3" class="color-box-modal" style="background-color: #00ffff">
          <input (click)="c('#00ffff')" id="col3" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#00ffff'">
        </label>

      </div>
      <div class="actions">
        <div class="ui button" (click)="c('Close click cancel')">Cancel</div>
      </div>
    </ng-template>

Хотя привязка ngModel, похоже, не работает. Все это открывается в модале (шаблоне), который сам по себе работает, просто привязка к ngModel, как я уже сказал, не работает.

Answer 1

Теперь, это может не всем помочь, но в конце концов это было мое решение.

Я начал с цикла, элемента элементов, где шаблон в моем вопросе предназначался для одного элемента.

Я решил или, вернее, обошел ситуацию связывания, просто переместив каждый элемент в отдельный компонент, примерно так:

<div *ngFor="let item of items>
         <app-sub-item [item]="item"></app-sub-item>
</div>

внутри у меня есть несколько из них:

<label for="col1" class="color-box-modal" style="background-color: #ffffff">
          <input (click)="setColor('#ffffff')" id="col1" type="radio" class="hidden">
</label>

Со следующим находящимся в ts-файле:

setColor(color: string) {
  this.item.color = color;
}

Это на самом деле работает очень хорошо в данный момент.

Надеюсь, тот, кто читает эту проблему, найдет применение в моем решении.

Answer 2

1. Нативный выбор HTML будет отображать только текст внутри, а любые другие теги будут игнорироваться, поэтому ваши поля не отображаются.
2. Если вы включите переключатель или флажок в <label> с атрибутом for равно идентификатору, данному <input>Вы можете щелкнуть в любом месте метки, скажем, некоторый смежный текст, и щелчок будет распространяться на вход, поэтому привязка будет работать.
3. Вы можете создать свои собственные элементы управления формы, ознакомьтесь с этой статьей. Таким образом, вы можете создать собственный элемент формы палитры цветов, который будет работать в любой форме, используя шаблоны или реактивные формы.

Хорошего дня