ionic2/ionic3 ion-item内部不渲染div或者span以及其他元素

ionic2/ionic3  ion-item内部不渲染div或者span以及其他元素，可以说是任何自定义的html元素

只识别

但是如下结构

    至
    

你猜怎么着，中间的label元素渲染后居然跑到第一个去了，崩溃。。。。

其他的结构

    至
    
至
    

中间俩元素直接不渲染，查看渲染后的网页，这俩直接就没有，蹦。。。。

最后参考了，大神们的博客，根本原因如下：https://stackoverflow.com/questions/44448237/ionic-2-cannot-view-span-inside-of-ion-item-how-to-render-simple-text

That's because of how content projection works, the ion-item will only render some components (like the ion-label and the ion-input) but will ignore some other html elements.

解决方法有2种：

1. 用ionic组件

2. 给元素加上item-start, item-end, item-left, item-right or item-content 这些属性， 我就用的这个方法：至问题解决。

以下是stackoverflow大神的解答：

https://stackoverflow.com/questions/44448237/ionic-2-cannot-view-span-inside-of-ion-item-how-to-render-simple-text

 

其他说明：

Attribute       Description
item-start      Placed to the left of all other elements, outside of the inner item.
item-end        Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
item-content    Placed to the right of any ion-label, inside of the input wrapper.

另外，ionic4官网也有

Default Note

说明，之前的V3没有这个说明，https://ionicframework.com/docs/api/note