angular - Ionic 4如何显示更多/更少的文字？(Ionic 4 how to show more / less text?)

Question

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

(我需要显示文本，但要显示2行，但是当用户单击“显示更多”时，他/她可以看到所有文本。)

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>

I need to add option off seemore/less in annoucementDetails

(我需要在annoucement中关闭seemore / less选项)

  ask by Umaiz Khan translate from so

Answer 1

Try like this:

(尝试这样：)

Working Demo

(工作演示)

.html

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

(.ts)

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

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