【问题标题】:ion-label is not displaying whole text in Ionic2离子标签未在 Ionic2 中显示整个文本
【发布时间】:2016-12-22 10:37:49
【问题描述】:

我在 ion-item 中使用了 ion-label,但没有显示描述(而是显示点-点..)我希望它显示整个文本..有什么解决方案吗?

<ion-card *ngFor="let product of products">
    <img [src]="product.imageURL" />
    <ion-card-content>
        <ion-card-title primary [innerHTML]="product.title"></ion-card-title>
        <ion-item class="item-text-wrap">
        <ion-item>
            <ion-label primary>Description</ion-label>
            <ion-label [innerHTML]="product.description"></ion-label>
        </ion-item>
    </ion-card-content>
</ion-card>

【问题讨论】:

    标签: angular typescript ionic-framework ionic2 ionic3


    【解决方案1】:

    更新

    你也可以像这样在ion-card中设置text-wrap属性

    <ion-card text-wrap *ngFor="let product of products">
    ...
    </ion-card>
    

    额外提示:如果您将text-wrap(作为属性,而不是作为类)放在ion-list 中,则该列表中的所有项目都将应用text-wrap 效果。这样您就不需要将text-wrap 属性放在所有项目中,这将帮助您稍微优化您的应用程序。


    旧答案:

    您可以使用ion-textarea(已禁用)来显示说明。查找有关 ion-textarea 元素 here 的更多信息。

    <ion-card *ngFor="let product of products">
        <img [src]="product.imageURL" />
        <ion-card-content>
            <ion-card-title primary>{{ product.title }}</ion-card-title>
            <ion-item>
                <ion-label primary>Description</ion-label>
                <ion-textarea rows="6" disabled [value]="product.description"></ion-textarea>
            </ion-item>
        </ion-card-content>
    </ion-card>
    

    rows 属性允许您根据描述文本的长度来设置要显示的行数。通过使用disable 属性,ion-textarea 类似于label,但显示不止一行内容。最后但并非最不重要的一点是,我使用value 属性来设置带有产品描述的元素内容。

    关于您的代码的一些问题:

    1. 您打开了两个 ion-item 元素,但只关闭了其中一个

      <ion-item class="item-text-wrap">
              <ion-item>
              <!-- ... -->
      </ion-item>
      
    2. 除了使用[innerHTML]属性绑定产品标题,你可以只使用插值

      <ion-card-title primary>{{ product.title }}</ion-card-title>
      

    【讨论】:

    • 谢谢!有用的建议。
    • 很高兴我能帮上忙 :)
    • [innerHtml] 如果您有要显示的 html 内容很有用。不过 product.title 不太可能。
    【解决方案2】:

    对我来说,IONIC 3.x 的目标是将标志放在主要位置:

    <ion-label primary>collection response: {{ this.response }} </ion-label>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-08-18
      • 1970-01-01
      • 2015-06-30
      • 2020-02-03
      • 1970-01-01
      • 1970-01-01
      • 2018-12-02
      相关资源
      最近更新 更多