查找组件

ABP商业版的Angular UI引入了一些带有abp-lookup-...选择器前缀的组件。这些组件用于获取关联实体数据。

设置

这些组件位于_@volo/abp.commercial.ng.ui_包中，该包已包含在ABP模板中。因此，只要您的项目是基于这些模板创建的，并且没有删除该包，您就可以使用查找组件。您可以在独立组件中导入这些组件以便使用。

查找HTTP请求

所有查找组件都使用查找请求来获取相关实体记录。由于词法作用域的原因，这些请求必须是箭头函数。

@Injectable({
  providedIn: 'root'
})
export class AuthorService {
  getCountryLookup = (input: LookupRequestDto) =>
    this.restService.request<any, PagedResultDto<LookupDto<string>>>({
      method: 'GET',
      url: '/api/app/authors/country-lookup',
      params: { filter: input.filter, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
    },
    { apiName: this.apiName });

  // 为简洁起见，省略了服务的其余部分
}

查找自动补全组件

当关联实体的记录数量未知，或者您希望通过搜索功能提升用户体验时，自动补全是一个不错的选择。虽然并非最佳场景，但下面的国家选择器展示了查找自动补全组件的工作原理：

不要忘记在您的组件中导入LookupTypeaheadComponent，以下是其在模板中的使用方法：

<abp-lookup-typeahead
  cid="author-country-id"
  formControlName="countryId"
  displayNameProp="name"
  [editingData]="selected?.country"
  [getFn]="service.getCountryLookup"
/>

可用属性如下：

• cid: 查找组件内部表单控件（例如输入框或选择元素）的ID。使表单控件能够响应<label>事件。
• editingData: 如果正在更新记录，则为关联实体数据。
• displayNameProp: 更新记录中用作表单控件显示名称的属性。
• lookupNameProp: 实体中用作选项显示名称的属性。应与查找HTTP请求接口匹配。(默认值：displayName)
• lookupIdProp: 实体中用作选项唯一键的属性。应与查找HTTP请求接口匹配。(默认值：id)
• maxResultCount: 显示的最大选项数量。(默认值：10)
• getFn: 通过HTTP请求获取关联实体记录的函数。由于词法作用域的原因，必须是箭头函数。
• disabled: 此属性允许您禁用/启用查找组件。(默认值：false)。

查找选择组件

当关联实体的记录数量较少（通常为固定数量）且不需要搜索时，选择组件是一个不错的选择。下面的国家选择器展示了查找选择组件的工作原理：

不要忘记在您的组件中导入LookupSelectComponent，以下是其在模板中的使用方法：

<abp-lookup-select
  cid="author-country-id"
  formControlName="countryId"
  displayNameProp="name"
  [getFn]="service.getCountryLookup"
/>

可用属性如下：

• cid: 查找组件内部表单控件（例如输入框或选择元素）的ID。使表单控件能够响应<label>事件。
• displayNameProp: 更新记录中用作表单控件显示名称的属性。
• lookupNameProp: 实体中用作选项显示名称的属性。应与查找HTTP请求接口匹配。(默认值：displayName)
• lookupIdProp: 实体中用作选项唯一键的属性。应与查找HTTP请求接口匹配。(默认值：id)
• getFn: 通过HTTP请求获取关联实体记录的函数。由于词法作用域的原因，必须是箭头函数。
• disabled: 此属性允许您禁用/启用查找组件。(默认值：false)。