イオン2イオンアイテムのスパンを見ることができない、簡単なテキストをレンダリングする方法

Question

何かが欠落しているかどうかはわかりませんが、イオンアイテムにスパンを追加しようとすると、 div。

<ion-card> 
    <ion-card-title> 
    </ion-card-title> 
    <div> 
    <button ion-button (click)="toggleEdit()">Edit</button> 
    </div> 
    <ion-list> 
    <ion-card-content> 
     <ion-item [hidden]="editOptions.!isEditing"> 
     <span class="inline-edit">Text</span> 

     <ion-label color="primary">{{label}}</ion-label> 
     <ion-input></ion-input> 
     <span class="inline-edit">{{value}}&nbsp;</span> 
     </ion-item> 
     <ion-item [hidden]="!editOptions.isEditing"> 
     <ion-label color="primary">{{label}}</ion-label> 
     <ion-input [(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input> 
     </ion-item> 
    </ion-card-content> 
    </ion-list> 
</ion-card> 

イオンラベルと入力ディスプレイとうまく動作しますが、どのように私は、彼らがレンダリングされていないアイテムのスパンやdiv要素を使用しようとします。クロムで調べても

単純なテキストを表示するにはどうすればいいですか？コンポーネントでHTMLを使用できませんか？少量のテキストをレンダリングするためには、イオニック2は何を意味するのですか？ラベルは常に入力を超えなければならないように見えるので、どのコンポーネントを使用する必要がありますか？

Answer 1

コンテンツ投影の仕組みのため、ion-itemは一部のコンポーネント（ion-labelやion-inputなど）をレンダリングしますが、その他のhtml要素は無視します。

はそれを修正する他の方法があるかもしれませんが、私の知る限り次の2つの選択肢があります。

1）テキストだけの小さなテキストがある場合は、notesを使用することができます。

注意事項はイオンアイテムの詳細項目です。これは、項目の左側または右側にあることができるグレー表示された要素 を作成します。

<ion-content> 
    <ion-list> 
    <ion-item> 
     <ion-note item-start> 
     Left Note 
     </ion-note> 
     My Item 
     <ion-note item-end> 
     Right Note 
     </ion-note> 
    </ion-item> 
    </ion-list> 
</ion-content> 

次に、あなたのシナリオに適合するようにスタイルのルールで遊ぶことができます。

2）は無視HTML要素にitem-start、item-end、item-left、item-rightまたはitem-content属性を追加します。

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. 

希望のレイアウトを取得するまで、あなたがそれらの属性と遊ぶことができるthis plunkerを見てみてください。

<ion-item style="background: transparent;"> 
     <span item-content class="inline-edit">Text</span> 
     <ion-label color="primary">Label</ion-label> 
     <ion-input></ion-input> 
     <span item-content class="inline-edit">Value</span> 
    </ion-item>