Ionic 4如何显示更多/更少的文本？

Question

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

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

我需要在announcementDetails中添加关闭seemore/less的选项

Answer 1

尝试这样：

工作演示

.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;
  }