Ionic 2无法查看离子项目内部的跨度，如何呈现简单文本 [英] Ionic 2 Cannot view span inside of ion-item, how to render simple text

问题描述

我不确定是否丢失了某些东西，但是当我尝试向离子项目添加跨度时，该跨度不会呈现，也不会显示div.

I'm not sure if I'm missing something, but when I try to add a span to a Ion Item the span is not rendered, nor 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>

离子标签和输入可以正常显示，但当我尝试在Item中使用跨度或div时，它们不会呈现.即使当我用铬检查它们时.

Ion label and Input display and work fine, but how when I try to use a span or a div in an Item they aren't rendering. Even when I inspect them in chrome.

如何呈现简单的文本，我不允许在组件中使用HTML吗? Ionic 2可以用来渲染少量文本的方法是什么，看来标签必须始终位于输入上方，那么我应该使用哪个组件?

How can I render simple text, Am I not allowed to use HTML in a component? What Is the Ionic 2 equivently for rendering small amounts of text, it appears labels have to always be over an input, so what component should I use?

推荐答案

这是因为内容投影的工作原理，ion-item仅会渲染某些组件(例如ion-label和ion-input)，但会忽略某些组件其他html元素.

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.

也许还有其他方法可以修复它，但是AFAIK有两种选择:

There may be other ways to fix it, but AFAIK you have two choices:

1)如果文本只是小文本，则可以使用注释.

1) If the text is just a small text , you can use notes.

注释是离子项目中的详细项目.它创建了灰色元素 可以在项目的左侧或右侧.

A note is detailed item in an ion-item. It creates greyed out element that can be on the left or right side of an item.

<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>

然后您可以使用样式规则以使其适应您的方案.

You can then play with the style rules to adapt it to your scenario.

2)将item-start，item-end，item-left，item-right或item-content属性添加到忽略的html元素.

2) Add the item-start, item-end, item-left, item-right or item-content attribute to the ignored html elements.

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.

请查看此导航键，以便您可以使用这些属性，直到您获得所需的布局.

Please take a look at this plunker so you can play with those attributes until you get the desired layout.

  <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>

这篇关于Ionic 2无法查看离子项目内部的跨度，如何呈现简单文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！