Question

我在我的angular 6项目中使用ngx-color-picker，它正在处理我的项目组件HTML。但是，当我尝试在mat-menu菜单上使用选择器时，更改输入时将关闭颜色选择器。它没有给出任何错误。颜色选择成功，但是在颜色选择器输入中键入颜色值时，颜色已关闭。我不知道为什么这是我的代码。

<div class="d-flex mb-2" *ngFor="let clr of gradientArray; let i = index;">
   <input class="form-control" [cpPosition]="'right'" [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color, i)">
</div>

Answer 1

这是工作代码，请尝试：

HTML：

<button mat-button [matMenuTriggerFor]="menu" (click)="openMyMenu()">Menu</button>
<mat-menu #menu="matMenu" overlapTrigger="false">
  <span (mouseleave)="closeMyMenu()">
    <input *ngFor="let clr of gradientArray; let i = index;" mat-menu-item [cpPosition]="'right'" [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color, i)" (click) = "$event.stopPropagation()">
  </span>
</mat-menu>

TS：

@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
  gradientArray: any[] = [
    {color: 'red'},
     {color: 'blue'},
      {color: 'green'},
       {color: 'yellow'},
        {color: 'black'},
  ];

还要检查stackblitz链接：https://stackblitz.com/edit/angular-u7vj8e?file=src%2Fapp%2Fapp.component.ts

Answer 2

我自己也能用，只是添加了trackBy。

<div class="d-flex mb-2" *ngFor="let clr of gradientArray; let i = index; trackBy: trackBgGradient">
   <input class="form-control" [cpPosition]="'right'" [cpOutputFormat]="'hex'" [(colorPicker)]="clr.color" [style.background]="clr.color" (cpSliderDragEnd)="changeGradientColor(clr.color, i)">
</div>

ngx-color-picker在输入更改时被关闭

2 个答案: