如何在Widget Action中限制tb-entity-subtype-select仅显示指定设备配置文件

要实现只展示允许的设备配置文件，你可以利用tb-entity-subtype-select组件的[subtypes]输入属性，结合组件类逻辑过滤或指定目标子集，具体步骤如下：

1. 修改HTML代码 #

给原组件添加[subtypes]属性，绑定到组件类中定义的允许列表：

<tb-entity-subtype-select
        entityType="DEVICE"
        class="mat-block"
        formControlName="profile"
        [required]="true"
        [showLabel]="true"
        [subtypes]="allowedDeviceProfiles"
></tb-entity-subtype-select>

2. 在组件JS/TS中实现过滤逻辑 #

根据需求，有两种常见实现方式：

方式一：固定指定允许的设备配置文件 #

如果允许的配置文件是固定的，可直接在组件类中硬编码目标子集（需匹配设备配置文件的id和name，可从ThingsBoard后台获取）：

import { Component, OnInit } from '@angular/core';
import { EntitySubtype } from '@thingsboard/ui-sdk';

@Component({
  // 保留原有组件元数据配置
})
export class YourWidgetActionComponent implements OnInit {
  allowedDeviceProfiles: EntitySubtype[] = [];

  ngOnInit(): void {
    // 替换为你允许的设备配置文件实际ID和名称
    this.allowedDeviceProfiles = [
      { id: 'profile-uuid-1', name: '传感器设备' },
      { id: 'profile-uuid-2', name: '网关设备' }
    ];
  }
}

方式二：动态过滤所有设备配置文件 #

如果需要根据条件动态过滤（比如基于用户权限、标签等），可注入DeviceProfileService获取所有配置文件后再筛选：

import { Component, OnInit } from '@angular/core';
import { EntitySubtype } from '@thingsboard/ui-sdk';
import { DeviceProfileService } from '@thingsboard/ui-sdk';

@Component({
  // 保留原有组件元数据配置
})
export class YourWidgetActionComponent implements OnInit {
  allowedDeviceProfiles: EntitySubtype[] = [];

  constructor(private deviceProfileService: DeviceProfileService) {}

  ngOnInit(): void {
    // 获取所有设备配置文件并按需过滤
    this.deviceProfileService.getDeviceProfiles().subscribe(profiles => {
      // 示例：筛选名称包含指定关键词或匹配特定ID的配置文件
      this.allowedDeviceProfiles = profiles.filter(profile => 
        profile.name.includes('工业') || profile.id.id === 'fixed-profile-id'
      );
    });
  }
}

注意事项 #

• 确保EntitySubtype结构正确，必须包含id和name字段，与ThingsBoard返回的设备配置文件结构一致
• 动态过滤时需处理异步请求的加载状态，可添加加载提示避免组件空显示

内容的提问来源于stack exchange，提问作者Iñaki Goicolea Marin