Question

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

为此我有一个对象＆＃34;颜色＆＃34;使用颜色值作为其属性：

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

在网络上的一些例子后，我在我的html中设置了一个select-option结构：

<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绑定？

编辑：

在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

原生HTML选择只会在里面呈现文字，而其他任何标记都会被忽略，这就是为什么你的框没有显示的原因。
如果您使用属性<label>的{{1}}中的单选按钮或复选框等同于for的ID，则基本上可以点击标签上的任意位置，让我们说一些相邻的文本，点击将传播到输入，因此绑定仍然有效。
您可以创建自己的自定义表单控件，查看this article。因此，您可以创建一个自定义颜色选择器表单元素，该元素将使用模板表单或反应形式以任何形式工作。

度过愉快的一天

Answer 2

现在，这可能对每个人都没有帮助，但最终是我的解决方案。

我开始使用循环项目项目，其中我的问题中的模板仅用于单个项目。

我解决了，或者更确切地说是通过将每个项目移动到它自己的组件来解决绑定情况，有点像这样：

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

目前这实际上运作得很好。

希望无论谁阅读此问题都可以在我的解决方案中找到一些用处。

通过可点击的选项而不是select-option（下拉列表）绑定到ngModel

2 个答案: