how to have autocomplete on create and edit using ng-2 smart table

Question

So,here i am binding data from array i.e nameAutocompletee but i want to bind it from Api where table datasource is bind. Autocomplete is working fine with hardcoded array,but on edit mode it doesn't retain its actual value instead.

This is my html

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

this is my component.ts file

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

Here i want to bind the data from Api As table data is bind,but i dont know how to bind it,as in documentation it is not clearly mentioned.

@Lumix I saw your post for ng-2 smart table Autocomplete.It is working fine on add new record.But on edit it still display the autocomplete.Is there a way or property with i can display the actual value on edit instead of autocomplete. Please help.. — Jayant Belekar, Sep 17 '18 at 13:14

score 0 · Answer 1 · answered Nov 04 '19 at 17:37

What you can do is to set the settings.editor.config.completer.data object value when the promise or observable of your API is done.

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

call the service in the constructor or the OnInit.

how to have autocomplete on create and edit using ng-2 smart table

1 Answers1