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

Question

我在 angular 6 应用程序中使用 ng2-smart-table 显示数据。我启用了过滤器功能。现在我想将默认 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                
  },
}

Answer 1

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

那你就不能放与标题不同的占位符，除了hack JJ

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

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

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

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

使用方法:

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

Answer 2

更改ng2 smart的占位符table

第一步：转到--> 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 并更改下面的行 --> 来自

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

你准备好了

Answer 3

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

那个组件可能是这样的：

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 .." },
        }
      }
    };
  }

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

How to update placeholder text in ng2-smart-table?

placeholder

ng2-smart-table

angular