Question

我需要帮助..如果某些内容超过20个字符，我怎么能显示更多单词？

<ion-list no-padding no-border no-margin>
  <ion-item *ngFor="let item of items | async | reverse">
    <ion-card no-padding no-border>
    <img [src]="item.url" />
  <ion-row>
    <ion-item ion-start class="font">{{item.descrizione}}</ion-item>
  </ion-row>
</ion-item>
</ion-list>

现在，如果{{item.descrizione}}太长，则根本不会显示更多内容。我以为* ngIf {{item-descrizione.length}}＆gt; 20可以解决我的问题，但我不知道如何继续显示更多/更少的文本。

谢谢！

Answer 1

使用烟斗怎么样？这就是我所做的事情。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe {
  transform(value: string, args: string[]) : string {
    let limit = args.length > 0 ? parseInt(args[0], 10) : 10;
    let trail = args.length > 1 ? args[1] : '...';

    return value.length > limit ? value.substring(0, limit) + trail : value;
  }
}

和Component类和模板就像这样

 export class TruncatedTextComponent {
      limit: number = 40;
      truncating = true;
    }

    <div *ngIf="text">
    <div *ngIf="text.length <= limit">{{text}}</div>
    <div *ngIf="truncating && text.length > limit">
      {{text | truncate : limit}}
      <button ion-button (click)="truncating = false">show more</button>
    </div>
    <div *ngIf="!truncating && text.length > limit">
      {{text}}
      <button ion-button (click)="truncating = true">show less</button>
    </div>
    </div>

离子v3更多/更少

1 个答案: