Question

用户选择任何颜色后如何获得颜色值。

想在firestore中存储价值。

使用ngx-color-picker。

<input
        class="form-control ml-2 mr-2"
        [value]="color1"
        [style.background]="color1"
        [(colorPicker)]="color1"
        />

example

Answer 1

您可以使用colorPickerChange事件。

<input class="form-control" [value]="color1" [colorPicker]="color" [(colorPickerChange)]="updateFirestoreColor($event)/>

Answer 2

使用(colorPickerChange)="updateFirestoreColor($event)"获得价值。

<input
   class="form-control ml-2 mr-2"
   [value]="color1"
   [style.background]="color1"
   [(colorPicker)]="color1"
   (colorPickerChange)="updateFirestoreColor($event)"
/>

感谢@zooly供参考。

Answer 3

我知道这个问题比较老，但是我遇到了这个问题，找到了一个更好的解决方案。使用 colorPickerClose 代替 colorPickerChange 。仅在关闭选择器之后才会发出事件，而不是在每次更改检测时都发出事件。

updateColor(event) {
  console.log(event); // this is your selected color
}

并在ts文件中：

Treatment High_X Medium_X Low_X
N1 6.45 2.61 NA
N1 9.43 2.82 NA
N2 7.2 2.92 1.9
N2 3.67 3.29 2.94
N3 2.72 2.4 1.36
N3 3.51 4.3 1.99
N4 9.76 2.91 2.35
N4 6.72 3.42 6.04
N5 7.28 4.1 1.78
N5 5.09 4.38 NA

Treatment High_Y Medium_Y Low_Y
N1 4.45 6.1 2.9
N1 6.23 8.2 1.8
N2 4.2 2.2 NA
N2 2.7 3.9 NA
N3 5.2 4.0 3.6
N3 5.1 4.3 2.9
N4 7.6 NA 3.5
N4 7.2 NA 1.4
N5 2.8 3.1 1.8
N5 5.9 3.8 NA

获取颜色选择器的更改值

3 个答案: