通過可點擊的選項而不是選擇選項（下拉菜單）綁定到ngModel

Question

我正在嘗試使用預定義的顏色構建基本的顏色選擇器。

為此，我有一個帶有顏色值的對象“顏色”作為其屬性：

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類具有height和width值，但是要單擊幾個彩色框以進行選擇。

除了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

1. 本機HTML選擇將僅在其中呈現文本，而其他任何標簽都將被忽略，因此這就是您的框未顯示的原因。
2. 如果您將單選按鈕或復選框包裝在<label> ，且屬性的for等於給<input>的ID，則基本上可以單擊標簽上的任意位置，說一些相鄰的文本，然后單擊將傳播到輸入，因此綁定仍然有效。
3. 您可以創建自己的自定義表單控件，請參閱本文 。 因此，您可以創建一個自定義顏色選擇器表單元素，該元素將使用模板表單或反應表單以任何形式工作。

祝你今天愉快

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

目前，這實際上很好。

希望閱讀此問題的人可以在我的解決方案中找到一些用處。