Ionic 3如何为元素动态添加属性？

嘿，我完全懂你不想写重复*ngIf代码的心情！在Ionic 3里，用动态属性绑定就能完美简化你的代码，只需要一个<ion-item>标签就搞定啦！

具体实现代码 #

<ion-item 
  [attr.item-start]="isStart ? '' : null" 
  [attr.item-end]="!isStart ? '' : null"
>
  {{ isStart ? 'Start' : 'End' }}
</ion-item>

原理说明 #

• Angular的[attr.xxx]属性绑定语法可以动态控制HTML属性的存在：当绑定值为null或undefined时，这个属性不会被渲染到DOM上；当值为非空字符串（这里用空字符串''就足够），属性就会被正常添加到元素上。
• 这样我们只需要维护一个<ion-item>，通过isStart变量同时控制item-start/item-end属性的显示，以及内部文本的切换，彻底告别重复的标签代码。

如果你的内部内容不止简单的文本，还可以搭配<ng-container>来切换复杂内容，但核心还是用动态属性绑定来控制item-start/item-end，保持HTML结构的简洁性。

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