如何修改ng2-smart-table搜索框占位文本？已尝试方案无效

方案1：直接通过settings配置（适用于v1.7.0+版本） #

如果你的ng2-smart-table版本在1.7.0及以上，可直接在列配置或全局配置中设置占位文本：

针对单列过滤器占位文本

在settings.columns的对应字段中添加filter.placeholder配置：

settings = {
  actions: { add: false, position: 'right' },
  edit: {
    editButtonContent: '<i class="text-primary nb-edit"></i>',
    saveButtonContent: '<i class="nb-checkmark"></i>',
    cancelButtonContent: '<i class="nb-close"></i>',
  },
  delete: {
    deleteButtonContent: '<i class="text-danger nb-trash"></i>',
    confirmDelete: true,
  },
  columns: {
    organization_name: {
      title: 'Name',
      type: 'string',
      filter: {
        placeholder: '搜索组织名称' // 自定义单列搜索占位文本
      }
    },
    organization_address: {
      title: 'Address',
      type: 'string',
      filter: {
        placeholder: '搜索组织地址'
      }
    },
    organization_phone: {
      title: 'Phone',
      type: 'string',
      filter: {
        placeholder: '搜索联系电话'
      }
    }
  },
  mode: 'external',
};

针对全局搜索框占位文本

若要修改顶部全局搜索框的占位文本，在settings中添加全局filter配置：

settings = {
  // 其他配置...
  filter: {
    input: {
      placeholder: '输入关键词搜索' // 全局搜索占位文本
    }
  },
  // ...
};

方案2：自定义过滤器组件（兼容旧版本） #

如果当前版本不支持直接配置占位文本，可通过自定义组件替换默认过滤器：

1. 创建自定义过滤器组件

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FilterComponent } from 'ng2-smart-table';

@Component({
  template: `
    <input 
      type="text" 
      class="form-control" 
      placeholder="{{ customPlaceholder }}" 
      [(ngModel)]="query"
      (ngModelChange)="onChange($event)"
    >
  `,
})
export class CustomFilterComponent implements FilterComponent {
  @Input() customPlaceholder: string; // 传入自定义占位文本
  @Input() query: string;
  @Output() queryChange: EventEmitter<string> = new EventEmitter();

  onChange(query: string) {
    this.queryChange.emit(query);
  }
}

2. 在模块中声明组件
   确保将CustomFilterComponent添加到模块的declarations中（Angular <9版本还需添加到entryComponents）。

3. 在settings中指定自定义组件

settings = {
  // 其他配置...
  columns: {
    organization_name: {
      title: 'Name',
      type: 'string',
      filter: {
        component: CustomFilterComponent,
        config: {
          customPlaceholder: '搜索组织名称'
        }
      }
    },
    // 其他列同理配置
  },
  // ...
};

注意事项 #

• 若之前的方案无效，大概率是版本差异导致配置路径不匹配，优先检查当前ng2-smart-table的版本，对应官方文档调整配置。
• 建议将模板中的HTML转义字符（如<）替换为原生标签（<），避免解析异常。

内容的提问来源于stack exchange，提问作者tech leadz