在 angular 多选选项卡中设置文本

Question

我使用 angular 2 多选。当用户单击它时，会在后台调用 API 并在下拉列表中显示选项。但是由于 API 需要时间给出响应，下拉列表显示为 "No data available"，然后在收到时显示响应。如何将该默认文本更改为 "Loading..." 之类的内容？

Answer 1

将 "No data available" 替换为 "Loading..." 作为默认文本。当调用 API 并获取响应时，您可能会用将替换 "Loading..." 的响应覆盖下拉选项。如果 API 获取 0 个响应，那么您应该替换为 "No data available".

如果您在调用 API 之前显示 "No data available" 那么这意味着您是在说用户下拉菜单没有任何价值，但它会在以后带来价值。通过这个你传达了关于下拉菜单的错误想法，它与你需要的用户体验不一致，如果你同意的话。

下面的解决方案是一个黑客，你可能想根据要求重写，因为我假设你的代码看起来有点像下面，但我与解决方案一起使用：

html:

<ng-multiselect-dropdown
  [placeholder]="text"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
>
</ng-multiselect-dropdown>

ts:

//Declare settings

this.dropdownSettings = {
      singleSelection: false,
      idField: 'id',
      textField: 'text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      noDataAvailablePlaceholderText: "Loading...",
      itemsShowLimit: 3,
      allowSearchFilter: true,
      limitSelection: 2
    };
  }
onClick(){
  // then api call here will replace the string most probably
}

Answer 2

有一个名为 "noDataLabel" 的下拉设置属性成功了.. 当没有数据可用时使用它的值。

在 angular 多选选项卡中设置文本

Setting text in angular multiselect tab

html

css

multi-select

angularjs

angular