从PrimeNG中覆盖'MultiSelect'组件中的函数

Question

我是JS的新手。我有一个小的前端任务，经过几个小时的搜索后，我不知道该如何解决它。

我需要重写PrimeNG MultiSelect组件中的这个函数：MultiSelect.prototype.updateLabel。

在项目中，我正在处理的标签应该是静态的，但当悬停时的alt文本应该像原始实现一样是动态的。

如果您能指点我正确的方向，那就太好了。我已经找到了这个page，但它没有帮助我，因为我不知道如何正确实现它。

提前感谢任何帮助。

- alexkov

---

你目前做了什么？ - anshuVersatile

您链接的页面是关于PrimeFaces而不是PrimeNG的。 - Jasper de Vries

Answer 1

我在我的项目中也曾遇到过同样的问题。

以下是我为了让它工作所做的操作： 在组件的 .html 文件中添加类似以下内容：

<p-multiSelect #multiselect
        [options]="someOptions"
        [(ngModel)]="someModel.options"
        [defaultLabel]="Did this work?"
        (onChange)="onChange($event)"
>
</p-multiSelect>

在您的组件文件中构造函数下方添加以下内容：

@ViewChild('multiselect') multi: MultiSelect;

我将我的代码放在一个始终被调用的setter中，但是无论何时需要更改标签 - 例如在订阅功能中 - 您都可以使用以下方法进行覆盖:

this.multi.updateLabel = function () {
    var label = this.value.length.toString() + " Data Points Selected";
    this.valuesAsString = label;
}

希望这能帮到您！

- ArchbishopLolly

---

非常感谢！这正是我所需要的。 - alexkov