Angular15中如何通过HTML为DevExtreme dx-select-box添加‘全选’选项

需要在Angular 15的DevExtreme dx-select-box控件中复刻原生HTML select的效果，原生代码如下：

<select  ng-model="selectedVal" ng-change="selectedValueChanged()">
     <option value="A">All</option>
     <option ng-repeat="item in itemArray" value="{{item.ID}}">{{item.Name}}</option>
</select>

当前的dx-select-box实现代码：

<dx-select-box class="mt-1.5"
      valueExpr="ID"
      displayExpr="Name"
      [dataSource]="itemArray"
      [(value)]="selectedVal"
      (onValueChanged)="selectedValueChanged()">
</dx-select-box>

要求不修改TypeScript中的itemArray，仅通过HTML模板给dx-select-box添加第一个值为'A'的'All'选项。

可以通过DevExtreme内置的<dxi-item>标签，直接在dx-select-box内部添加自定义选项，该选项会优先于数据源渲染的选项显示，具体实现代码如下：

<dx-select-box class="mt-1.5"
      valueExpr="ID"
      displayExpr="Name"
      [dataSource]="itemArray"
      [(value)]="selectedVal"
      (onValueChanged)="selectedValueChanged()">
  <!-- 自定义"All"选项 -->
  <dxi-item value="A" text="All"></dxi-item>
</dx-select-box>

关键说明 #

• <dxi-item>是DevExtreme下拉类控件的原生自定义项标签，直接嵌套在dx-select-box内部即可生效
• value属性对应原生select中option的value值（此处设为'A'），text属性对应选项显示的文本（此处设为'All'）
• 由于已设置valueExpr="ID"，自定义项的value会自动匹配绑定的selectedVal字段类型，无需额外处理逻辑

内容的提问来源于stack exchange，提问作者Dan