如何使用 ng-2 智能表在创建和编辑时自动完成答案

【问题标题】：how to have autocomplete on create and edit using ng-2 smart table如何使用 ng-2 智能表在创建和编辑时自动完成
【发布时间】：2019-11-05 01:37:40
【问题描述】：

所以，我在这里绑定来自数组的数据，即 nameAutocompletee，但我想从绑定表数据源的 Api 绑定它。自动完成功能适用于硬编码数组，但在编辑模式下它不会保留其实际值。

这是我的html

  <ng2-smart-table [settings]="settings" [source]="source" 
    (editConfirm)="onSaveConfirm($event)" 
      (createConfirm)="onCreateConfirm($event)"
      (deleteConfirm)="onDeleteConfirm($event)">
    </ng2-smart-table>

这是我的 component.ts 文件

    source: LocalDataSource;
    nameAutocompletee =[
     {    
      id: 1,   
      name: 'Warehouse 1',         
    },
    {  
      id: 1,     
      name: 'Warehouse 2',     
    },
    {  
      id: 1,     
      name: 'Warehouse 23',     
    },
    { 
      id: 1,      
      name: 'Warehouse 12',     
    },
    {    
      id: 1,   
      name: 'Warehouse 5',     
    },
  ];  
settings = {
    add: {
      addButtonContent: '<span class="">Add</span>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmCreate: true,
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave: true,
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },

    columns: {
      name: {
        title: 'Name',
        type: 'html',       
        editor: {
          type: 'completer',
          config: {
            completer: {              
              data: this.nameAutocompletee,            
              searchFields: 'name',
              titleField: 'name'
            },
          },
        }
      },
      address: {
                title: 'Address',
        type: 'html',
      },
   },
  };



  constructor(private orderManagerService: OrderManagerService) {   
    this.GetCompanyDetails();    
  }

  ngOnInit() {             
    this.GetCompanyDetails();    
  }

  GetCompanyDetails()
  {      
      this.orderManagerService.GetCreateNewOrders().subscribe(res => {               
      this.source = new LocalDataSource();          
      this.source.load(res.createOrders);                
    },
    );
  }

这里我想绑定来自 Api 的数据，因为表数据是绑定的，但我不知道如何绑定它，在文档中没有明确提及。

【问题讨论】：

@Lumix 我看到了你关于 ng-2 智能表自动完成的帖子。它在添加新记录时工作正常。但在编辑时它仍然显示自动完成。有没有我可以显示的方法或属性编辑而不是自动完成时的实际值。请帮忙..

标签： typescript angular6 ng2-smart-table

【解决方案1】：

您可以做的是在 API 的 promise 或 observable 完成时设置 settings.editor.config.completer.data 对象值。

this.someService().getNameAutoComplete().then(res =>{ this.settings.editor.config.completer.data = res});

在构造函数或 OnInit 中调用服务。

【讨论】：