如何将条件样式应用于cdkDragPlaceholder?

Question

我试图根据检查某些重叠的条件更改自定义拖动占位符的背景颜色。我正在记录布尔值，它更新正确，但样式没有得到更新。我正在使用[ngClass]，它不适合我。基本值不会被覆盖。

我的代码是这样的:

<div
class="droplist"
cdkDropList
cdkDropListSortingDisabled
[cdkDropListData]="entries"
(cdkDropListDropped)="entryDropped($event)"
[cdkDropListSortPredicate]="insertLastSpot"
(cdkDropListEntered)="checkForOverlapsOnEnter($event)"
(cdkDropListExited)="hideCustomIndicator()">
<app-entry *ngFor="let entry of entries"
(click)="selectEntry(entry)"
[entry]="entry"
cdkDrag
[cdkDragData]="entry">
<div
*cdkDragPlaceholder
[ngClass]="
{'example-custom-placeholder-warning': showCustomIndicator,
'example-custom-placeholder': !showCustomIndicator}">
<p *ngIf="showCustomIndicator">Overlap!</p>
</div>
</app-entry>
</div>

showCustomIndicator的基值为false。它总是显示example-custom-placeholder，即使它是true。

Answer 1

@totallynewb提到，在拖动和改变值时可能存在角度变化检测问题。

我重新创建了这个，如果你在拖动时运行changedetection，它会改变你的颜色

小例子:https://stackblitz.com/edit/angular-gjhatj

所以你应该调查一下。