离子2无法查看离子项内的跨度,如何渲染简单文本

Question

我不确定我是否遗漏了某些东西,但是当我尝试将一个跨度添加到Ion Item时,不会渲染范围,也不会显示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？什么是Ionic 2等效地渲染少​​量文本,看起来标签必须始终在输入上,所以我应该使用什么组件？

Answer 1

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

可能有其他方法可以修复它,但AFAIK有两种选择:

1)如果文本只是一个小文本,您可以使用笔记.

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

<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)添加的item-start,item-end,item-left,item-right或item-content归因于忽略HTML元素.

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.

请查看此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>