Question

所以，这里我要绑定数组中的数据，即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绑定数据，因为表数据已绑定，但我不知道如何绑定它，如在文档中没有明确提及。

Answer 1

您可以做的是在完成对API的承诺或可观察性后，设置settings.editor.config.completer.data对象的值。

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

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

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

1 个答案: