Angular组件中如何条件化添加可选multiple属性

Angular原生支持条件化添加属性，针对multiple这类布尔属性，有两种常用实现方式：

• 第一种：布尔属性绑定（优先推荐）
  直接将multiple作为布尔属性绑定到你的条件变量即可，当变量值为true时属性会自动挂载，为false时属性会被完全移除：

<!-- 组件模板代码 -->
<select [multiple]="isMultiple">
  <option *ngFor="let item of optionList" [ngValue]="item.value">{{item.name}}</option>
</select>

其中isMultiple是你组件中定义的布尔类型变量，根据业务场景修改它的值即可动态切换多选/单选状态。

• 第二种：通用Attribute绑定
  如果需要更通用的属性控制逻辑，可以使用attr.前缀的属性绑定方式，绑定值为null时Angular会自动移除对应属性：

<select [attr.multiple]="isMultiple ? 'multiple' : null">
  <!-- 选项内容 -->
</select>

注意事项：如果你的select搭配了ngModel或者响应式表单使用，需要同步调整绑定值的类型：开启multiple时绑定值应为数组类型，关闭时应为单个值类型，避免出现赋值异常。

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