如何更新 ng2-smart-table 中的占位符文本？

Posted 2023-03-05

【中文标题】如何更新 ng2-smart-table 中的占位符文本？

【英文标题】：How to update placeholder text in ng2-smart-table?

【发布时间】：2019-02-13 09:46:23

【问题描述】：

我使用ng2-smart-table 在angular 6 应用程序中显示数据。我启用了过滤器功能。现在我想将默认的search 设置为所有columns 占位符中的文本。我已经搜索了很多。但我无法更改过滤器的占位符。

<ng2-smart-table [settings]="setting" [source]="dataSource"></ng2-smart-table>

在 .ts 文件中。

add: 
  confirmCreate: false
,
columns: 
   id: 
    title: 'ID',
    filter: true        
  ,
  name: 
    title: 'First Name',
    filter: true                
  ,

【问题讨论】：

你能分享你的代码吗？

@kboul 我已经更新了我的问题。请检查一下。

我不确定我明白你的意思。我看了here。只有具有占位符的输入是搜索输入。是否要将搜索输入占位符更改为其他内容？

是的，我已经调查过了。它只是将一个文本框静态化。但我需要过滤所有列。

根据ng2-smart-table 实现，无法为过滤器配置占位符。过滤器占位符声明为placeholder=" column.title "。如果你真的需要实现，那么我害怕你需要覆盖它。

【参考方案1】：

实际上有一种简单的方法可以实现这一点，那就是制作您自己的自定义输入文本组件，并为其提供您需要的任何配置...

该组件可能是这样的：

import  Component, OnChanges, OnInit, SimpleChanges  from "@angular/core";
import  FormControl  from "@angular/forms";
import  DefaultFilter  from "ng2-smart-table";
import  debounceTime, distinctUntilChanged  from "rxjs/operators";

@Component(
  selector: "input-filter",
  template: `
    <input
      [ngClass]="inputClass"
      [formControl]="inputControl"
      class="form-control"
      type="text"
      placeholder=" column?.filter?.config?.placeholder || column.title "
    />
  `,
)
export class CustomInputTextFilterComponent extends DefaultFilter implements OnInit, OnChanges 
  inputControl = new FormControl();

  constructor() 
    super();
  

  ngOnInit() 
    if (this.query) 
      this.inputControl.setValue(this.query);
    
    this.inputControl.valueChanges.pipe(distinctUntilChanged(), debounceTime(this.delay)).subscribe((value: string) => 
      this.query = this.inputControl.value;
      this.setFilter();
    );
  
  ngOnChanges(changes: SimpleChanges) 
    if (changes.query) 
      this.inputControl.setValue(this.query);
    
  

你可以在像这样初始化列时使用它：

initColumns(): void 
    this.columns = 
      nameEn: 
        title: "nameEn",
        type: "text",
        sort: true,
        filter: 
          type: "custom",
          component: CustomInputTextFilterComponent,
          config:  placeholder: "search here .." ,
        
      
    ;
  

【参考方案2】：

更换ng2智能表的占位符

第 1 步：转到--> node_modules\ng2-smart-table\lib\data-set\column.js

在您的 var 列中添加以下行，

this.placeholder = '';

看起来像

var Column = (function () 
    function Column(id, settings, dataSet) 
        this.id = id;
        this.settings = settings;
        this.dataSet = dataSet;
        this.title = '';
        this.placeholder = '';
        this.type = '';
        this.class = '';
        this.isSortable = false;
        this.isEditable = true;
        this.isFilterable = false;
        this.sortDirection = '';
        this.defaultSortDirection = '';
        this.editor =  type: '', config: , component: null ;
        this.filter =  type: '', config:  ;
        this.renderComponent = null;
        this.process();
    

第 2 步：在同一个文件上 --> 在 Column.prototype.process = function () 中添加this.placeholder = this.settings['placeholder'];，

看起来像这样

 Column.prototype.process = function () 
        this.title = this.settings['title'];
        this.placeholder = this.settings['placeholder'];
        this.class = this.settings['class'];
        this.type = this.prepareType();
        this.editor = this.settings['editor'];
        this.filter = this.settings['filter'];
        this.renderComponent = this.settings['renderComponent'];
        this.isFilterable = typeof this.settings['filter'] === 'undefined' ? true : !!this.settings['filter'];
        this.defaultSortDirection = ['asc', 'desc']
            .indexOf(this.settings['sortDirection']) !== -1 ? this.settings['sortDirection'] : '';
        this.isSortable = typeof this.settings['sort'] === 'undefined' ? true : !!this.settings['sort'];
        this.isEditable = typeof this.settings['editable'] === 'undefined' ? true : !!this.settings['editable'];
        this.sortDirection = this.prepareSortDirection();
        this.compareFunction = this.settings['compareFunction'];
        this.valuePrepareFunction = this.settings['valuePrepareFunction'];
        this.filterFunction = this.settings['filterFunction'];
    ;

第 3 步：转到 node_modules\ng2-smart-table\components\filter\filter-types\input-filter.component.js 并更改以下行 --> from

   Component(
        selector: 'input-filter',
        template: "\n    <input [(ngModel)]=\"query\"\n           [ngClass]=\"inputClass\"\n           [formControl]=\"inputControl\"\n           class=\"form-control\"\n           type=\"text\"\n           placeholder=\"  column.title\" />\n  ",
    ),

到：

Component(
            selector: 'input-filter',
            template: "\n    <input [(ngModel)]=\"query\"\n           [ngClass]=\"inputClass\"\n           [formControl]=\"inputControl\"\n           class=\"form-control\"\n           type=\"text\"\n           placeholder=\"  column.placeholder \" />\n  ",
        ),

第 4 步：转到您的 component.ts 并在您的列详细信息中添加以下行，如下所示 -->

  columns: 
        ExamID: 
          title: this.translate.get("table.ExamID")["value"],
          **placeholder:"your place holder",**
          type: "string"
        ,

你准备好了

【讨论】：

@ParshantKumar 它对我有用。谢谢你的回答。

@ParshantKumar 它适用于我当地的罚款。但是当我进行实时构建时，它不需要更改模块。那么我应该怎么做才能实时更改节点模块？

在 node_modules 中更改包的源代码不是一个好习惯，因为如果将项目安装在其他机器上会发生什么？您的更改将丢失，因为它不在真正的包中，因为我确实向 repo 发送了 Pull 请求...

@khushboo 确保您的 npm 缓存首先验证，然后构建项目。它应该可以正常工作。

@Ruben 我已经请求在节点模块中推送此更改，只要他们不包含在他们的节点模块中，它应该可以正常工作。

【参考方案3】：

我已经在 github 上查看了这个库的实现，占位符从 column.title 参数中获取它，所以理论上你应该在声明列时在列对象上设置这个属性，库将使用它来设置占位符。

那么你不能在标题之外放置一个不同的占位符，除了hack JJ

你可以看看： https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts#L15

回购问题以添加功能： https://github.com/akveo/ng2-smart-table/issues/785

公关已发送 https://github.com/akveo/ng2-smart-table/pull/900

我的叉子功能 https://github.com/RSginer/ng2-smart-table/tree/rsginer/allow-different-placeholder

如何使用：

 settings = 
  columns: 
   id: 
    title: 'ID',
    placeholder: 'Different placeholder',
   ,

【讨论】：

我之前检查过这个链接。你能告诉我它的例子吗？

是的，但与您的代码非常相似：stackblitz.com/edit/angular-yngnnb

如果您确实需要此功能或向该库的 repo 发送问题，我建议您考虑制作自己的表格组件。如果你愿意，我可以向图书馆提出拉取请求。（已编辑）问题存在：github.com/akveo/ng2-smart-table/issues/785

我现在在存储库上提出了拉取请求。我们只能等到所有者进行合并，或者您也可以使用我的 fork，请关注 PR 链接上的进度：github.com/akveo/ng2-smart-table/pull/900

抱歉，我没空。今天我将实施你的ans，我会更新你。 :)