通過可點擊選項而不是選擇選項綁定到ngModel（下拉列表）

Question

我想用預定義的顏色構建基本的colorpicker。

的，我有一個對象「色」的色彩值，因爲它的屬性：

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

---

編輯：

在奧斯曼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> 

裏面我有這些severel：

<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，則可以基本上單擊標籤上的任意位置，讓其說出一些相鄰的文本，然後單擊將傳播到輸入所以綁定仍然有效。
3. 您可以創建自己的自定義表單控件，查看this article。因此，您可以創建一個自定義顏色選擇器表單元素，該元素可以使用模板表單或反應形式以任何形式工作。

有一個愉快的一天