ngx-color-picker закрывается при изменении ввода - PullRequest
Новая
       19

ngx-color-picker закрывается при изменении ввода

0 голосов
/ 22 декабря 2018

Я использую ngx-color-picker в своем проекте angular 6, он работает над компонентом моего проекта 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>

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

Получилось, все заработало, Просто добавил 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>
0 голосов
/ 24 декабря 2018

это рабочий код, попробуйте:

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'},
  ];

Также проверьте ссылку на стек: https://stackblitz.com/edit/angular-u7vj8e?file=src%2Fapp%2Fapp.component.ts

...