通过可点击选项而不是选择选项（下拉菜单）绑定到 ngModel

Question

我正在尝试使用预定义的颜色构建一个基本的颜色选择器。

为此，我有一个对象“颜色”，其属性为颜色值：

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

根据网上的一些例子，我在我的 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 具有高度和宽度值，因为我不打算有一个下拉菜单，但要单击几个彩色框以进行选择。

是否有选择选项结构的替代方案，它允许我没有下拉菜单，而只有几个彩色框？单选按钮/复选框也不是理想的方式，因为我希望自己有一个可点击的字段来响应被点击。

如果没有其他选择，是否可以在单击按钮时进行 ngModel 绑定？

---

编辑：

在测试了 Osman Ceas 答案的选项 2 之后，我现在有了这个：

<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> 的ID，您基本上可以单击标签上的任意位置，比如一些相邻的文本，然后click 将传播到输入，因此绑定仍然有效。
3. 您可以创建自己的自定义表单控件，请查看this article。因此，您可以创建一个自定义颜色选择器表单元素，该元素可以使用模板表单或响应式表单在任何表单中工作。

祝你有美好的一天