如何更新ng2-smart-table中的占位符文本? [英] How to update placeholder text in ng2-smart-table?

问题描述

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

I'm using ng2-smart-table for display data in angular 6 app. I have enable filter feature. Now I want to set default search as a text in all columns placeholder. I have searched a lot. But I'm not able to change placeholder of filter.

<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                
  },
}

推荐答案

更改ng2智能表的占位符

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

Step 1: goto--> node_modules\ng2-smart-table\lib\data-set\column.js

在var列中添加以下行，

add below lines in you var column ,

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(){}，

Step 2: on same file --> Add this.placeholder = this.settings['placeholder']; in Column.prototype.process = function () {},

它看起来像这样

 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，然后将以下行->更改为

step 3: goto node_modules\ng2-smart-table\components\filter\filter-types\input-filter.component.js and change the below line --> 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，并在您的列详细信息中添加以下行，如下所示->

step 4: goto your component.ts and add the below line in you column details like below -->

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

您准备好了

这篇关于如何更新ng2-smart-table中的占位符文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！