在角度多选选项卡中设置文本

Posted 2023-03-06

【中文标题】在角度多选选项卡中设置文本

【英文标题】：Setting text in angular multiselect tab

【发布时间】：2020-08-14 08:24:08

【问题描述】：

我使用 Angular 2 多选。当用户单击它时，API 会在后台调用并在下拉列表中显示选项。但由于 API 需要时间来给出响应，下拉列表显示为“无可用数据”，然后在收到响应时显示响应。如何将默认文本更改为“正在加载...”？

【问题讨论】：

声明一个变量loading = false，点击tab后设为true。成功加载后再次使其为假... 正在加载？ '正在加载...': '未找到数据'

【参考方案1】：

将“无可用数据”替换为“正在加载...”作为默认文本。当调用 API 并获取响应时，您可能会使用将替换“正在加载...”的响应覆盖下拉选项。如果 API 获取 0 响应，则应替换为“无可用数据”。

如果您在调用 API 之前显示“无可用数据”，那么这意味着您在说用户下拉菜单没有任何价值，但稍后会带来价值。如果您同意，那么您就是在传达与您需要的 UX 不一致的下拉菜单的错误想法。

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

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

【讨论】：

您好 Shoma，感谢您的回复。但我的问题本身是怎么做？如何将“无数据”更改为“正在加载”，因为它是默认文本我不知道在哪里更改它。

我尝试了“内容”css-property，但在那里不起作用。

我已经用解决方案编辑了我的答案或者说 hack，可能会对你有所帮助

【参考方案2】：

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

【讨论】：

你的意思是“noDataAvailablePlaceholderText”吗？