如何使用@angular/cdk创建可拖动和可编辑的列表项？

Question

我正在尝试创建一个水平可拖动列表，其中包含应可编辑的项目。为此，我使用的是不带 material 且具有 [contentEditable]='true' 属性的 cdk 包。但项目不可编辑。我如何让它工作？

<div cdkDropList [cdkDropListOrientation]="'horizontal'" class="namingConventionDragDrop"
     (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let item of resultConvention; let i = index;">
        <div cdkDrag class="pop naming-placeholder" *ngIf="item.type === 'placeholder'">
                {{item.value}}
            <fa-icon (click)="remove(i)" icon="times-circle"></fa-icon>
        </div>
        <div cdkDrag class="pop" *ngIf="item.type === 'text'
           [contentEditable]="true" (click)="onItemClick($event)">
                {{item.value}}
            <fa-icon (click)="remove(i)" icon="times-circle"></fa-icon>
        </div>
        <div class="pop deactivated" *ngIf="item.type === 'extension'">
            {{item.value}}
        </div>
    </ng-container>
</div>
<div class="naming-convention preview">
    <span>Preview:</span>
    {{preview}}
</div>

因为我觉得跟focus有关系，所以加了一个focus()调用：

onItemClick(event) {
    event.target.focus();
}

前端预览。用户应该能够编辑 "text":

类型的项目

Answer 1

angular CDK 似乎吸收了左键单击事件。一种选择是使用右键单击进行编辑。

如何使用@angular/cdk创建可拖动和可编辑的列表项？

How to create draggable and editable list items using @angular/cdk?

contenteditable

typescript

angular

angular-cdk