Ionic 4如何显示更多/更少的文字? [英] Ionic 4 how to show more / less text?

问题描述

我需要显示两行文字，但是当用户单击显示更多"时，他/她可以看到所有文字.这是我的代码

I need to show text but in 2 lines but when user click on show more so he/she can see all text. This is my code

   <div *ngFor="let x of announcement">
         <ion-card class="group-box">
           <div text-left style="font-size: 16px; font-weight: bold; color: white; top: 10%;position: relative; margin-left: 10px;">
             {{x.announcementTitle}}
           </div>
           <div class="" text-left style="font-size: 16px; font-weight: bold; color: white; top: 25%;position: relative; margin-left: 10px;">
             {{x.announcementDetails}}
           </div>

           <div text-right class="announcement-username">
             {{x.createrName}}
           </div>
         </ion-card>
   </div>

我需要在annoucementDetails中关闭seemore/less选项

I need to add option off seemore/less in annoucementDetails

推荐答案

尝试如下:

Working Demo

.html

<div *ngFor="let x of announcement">
    <ion-card class="group-box">
        <div>
            {{x.announcementTitle}}
        </div>
        <div>
            <div *ngIf="!x.showMore">
                {{trimString(x.announcementDetails,100)}}
            </div>
            <div *ngIf="x.showMore">
                {{x.announcementDetails}}
            </div>
            <a (click)="x.showMore = !x.showMore">Show <span [innerHtml]="x.showMore ? 'less' : 'More'">  </span>
            </a>
        </div>

        <div text-right class="announcement-username">
            {{x.createrName}}
        </div>
    </ion-card>
</div>

.ts

 constructor() {
    this.announcement = this.announcement.map(item => ({
      ...item,
      showMore:false,
    }));
  }

  trimString(string, length) {
      return string.length > length ? 
             string.substring(0, length) + '...' :
             string;
  }

这篇关于Ionic 4如何显示更多/更少的文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！