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

问题描述

我不确定我是否遗漏了什么，但是当我尝试向 Ion 项添加跨度时，跨度未呈现，也未呈现 div.

<离子卡标题></离子卡标题>
<button ion-button(click)="toggleEdit()">编辑</button></div><离子列表><离子卡内容><ion-item [hidden]="editOptions.!isEditing"><span class="inline-edit">文本</span><ion-label color="primary">{{label}}</ion-label><离子输入></离子输入><span class="inline-edit">{{value}}&nbsp;</span></离子项目><ion-item [hidden]="!editOptions.isEditing"><ion-label color="primary">{{label}}</ion-label><离子输入[(ngModel)]="value" [required]="required" [type]="type" [name]="value"></ion-input></离子项目></离子卡内容></离子列表></离子卡>

离子标签和输入显示和工作正常，但是当我尝试在项目中使用跨度或 div 时，它们没有呈现.即使我用铬检查它们.

如何渲染简单的文本，我不允许在组件中使用 HTML 吗?什么是 Ionic 2 等价于呈现少量文本，似乎标签必须始终位于输入之上，那么我应该使用什么组件?

解决方案

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

可能有其他方法可以修复它，但 AFAIK 你有两个选择:

1) 如果文字只是小文字，可以使用notes.

<块引用>

note 是 ion-item 中的详细项目.它创建了灰色的元素可以在项目的左侧或右侧.

<离子列表><离子项目><ion-note item-start>左注</离子笔记>我的项目<ion-note item-end>右注</离子笔记></离子项目></离子列表></离子含量>

然后，您可以使用样式规则以使其适应您的场景.

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

属性说明item-start 放置在所有其他元素的左侧，在内部项目之外.item-end 放置在所有其他元素的右侧，内部项目的内部，输入包装器的外部.item-content 放置在输入包装器内任何离子标签的右侧.

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

 <ion-item style="background: transparent;"><span item-content class="inline-edit">文本</span><ion-label color="primary">标签</ion-label><离子输入></离子输入><span item-content class="inline-edit">值</span></离子项目>

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>

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.

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?

解决方案

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.

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

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) 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屋！