html - 不知道如何在 ngx-select-dropdown Angular 8 中设置选项

Question

我想在我的组件中获得一个下拉列表。

在我的 HTML 中，我有

<ngx-select-dropdown [options]="list"></ngx-select-dropdown>

在 TypeScript 文件中：

this.list = [
      {id:1,display:'job'},
      {id:2,display:'task'},
            ];
  }

如何在 .ts 中设置我的选项列表？使用“选项”是否正确？

Answer 1

是的。在官方文档中说：

options: Array - Array of string/objects that are to be the dropdown options.

你可以在这里阅读更多： https ://github.com/manishjanky/ngx-select-dropdown#readme

Answer 2

en el ngOnInit

this.selectConfig = {
            //limitTo: this.cities.length,
            limitTo: 1000,
            displayKey: 'name',
            search: true, // true/false for the search functionlity defaults to false
            // tslint:disable-next-line:max-line-length
            height: 'auto', // height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
            placeholder: 'Seleccione Ciudad', // text to be displayed when no item is selected defaults to Select,
            noResultsFound: 'No se encontraron resultados!', // text to be displayed when no items are found while searching
            searchPlaceholder: 'Buscar', // label thats displayed in search input,
            // tslint:disable-next-line:max-line-length
            searchOnKey: 'name', // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
            clearOnSelection: false, // clears search criteria when an option is selected if set to true, default is false
        };

Answer 3

在 中，config您需要更改 和 的默认displayKey值displayFn。

HTML

<ngx-select-dropdown  (change)="change($event)" [multiple]="true" [config]="config" [options]="list "></ngx-select-dropdown>

.ts 中的配置

  config = {
    displayFn:(item: any) => { return item.display; } ,//to support flexible text displaying for each item
    displayKey:"display", //if objects array passed which key to be displayed defaults to description
    search:true ,//true/false for the search functionlity defaults to false,
    height: 'auto', //height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
    placeholder:'Select', // text to be displayed when no item is selected defaults to Select,
    customComparator: ()=>{}, // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,
    limitTo:2, // number thats limits the no of options displayed in the UI (if zero, options will not be limited)
    moreText: 'more' ,// text to be displayed whenmore than one items are selected like Option 1 + 5 more
    noResultsFound: 'No results found!' ,// text to be displayed when no items are found while searching
    searchPlaceholder:'Search' ,// label thats displayed in search input,
    searchOnKey: 'name', // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
    clearOnSelection: false ,// clears search criteria when an option is selected if set to true, default is false
    inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)
  }