时间戳

首页 > 解决方案 > Angular双列表框使特定条目只读

angular - Angular双列表框使特定条目只读

问题描述

我正在使用“angular-dual-listbox”，并且我想将 RHS 中的一个特定条目设为只读，以便用户无法删除所有组。如果有人知道，请帮忙

在此处输入图像描述

标签： angularangular8angular9bootstrap-duallistbox

解决方案

查看了源代码.，它只是不受支持。

然而，文档确实描述了扩展组件的能力。这可以让你只添加一个小的验证。

并遵循该建议，您可以快速创建如下内容。

import { Component } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox';
 
@Component({
    selector: 'custom-dual-list',
    templateUrl: './custom-dual-list.component.html',
    styleUrls: [ './custom-dual-list.component.scss' ]
})
export class CustomDualListComponent extends DualListComponent {

  moveItem(source: BasicList, target: BasicList, item: any = null, trueup = true) {

    if (this.canMoveItem(item)) super.moveItem(source, target, item, trueup);

  }

  canMoveItem(item: any): boolean {
    // add some logic here.
    return true; // or false
  }
}

但是，他们的文档假定您添加了自己的模板和 css 文件。您可以尝试参考他们的，但这通常并不容易。一般来说，扩展组件在角度上从来都不是一件容易的事。组合比继承更容易，但它不会给你足够的控制权。

老实说，由于这只是一个小组件，您最好只复制整个源代码。（这只是 3 个小文件）您肯定会在不到一个小时内完成。

当然，您将丢失该组件的未来更新。因此，政治正确的做法可能是分叉他们的存储库，进行更改，然后发送拉取请求。最后在他们批准后，等待他们的下一个版本，并安装更新的包。

因为这需要大量的时间和精力，所以你最好只复制整个内容。

推荐阅读