Ionic 3截断数组for循环内的文本

Question

我收到来自 服务器 的 api 响应，其中包含一个属性的长文本。我想以一种简单的方式正确截断它们，我使用了这个 package.

这是我的 html

中的代码

<ion-card class="pin" *ngFor="let item of winner">
        <div class="wrapper" (tap)="onView(item)">
          <img [src]="item?.image | image:'300'" class="img" />
        </div>
        <button ion-button clear icon-only item-start class="profile">
          <ion-avatar item-start>
            <img [src]="" height="30" class="img-avatar" onError="this.src='https://vollrath.com/ClientCss/images/VollrathImages/No_Image_Available.jpg';">
          </ion-avatar>
          <ion-card-title ion-text color="textBlack"> {{item?.name?.firstName}} {{item?.name?.lastName}}
          </ion-card-title>
        </button>
        <p class="card-subtitle" *ngIf="item?.comment?.length >= 100" text-wrap>{{item?.comment | truncate : 100}}</p>

        <button ion-button full small block *ngIf="truncating && item.comment.length > 100" (tap)="truncating = false">
          Read More
        </button>
        <button ion-button full small block *ngIf="!truncating && item.comment.length > 100" (tap)="truncating = true">
            Show Less
        </button>
      </ion-card>

在我的 ts 文件中

import { TruncateModule } from '@yellowspot/ng-truncate';

truncating = true;

我这里没有任何错误，但是截断在数组的所有元素上都有效。

如何触发和截断数组中特定项的 comment？

如果有人能提供帮助，我们将不胜感激。提前致谢。

Answer 1

你可以扩展你的模型并将 truncating 存储在你的模型而不是你的组件中。

我怀疑你的模型叫 winner:

export class winner{
//your fields
truncating: boolean;
}

然后把你的按钮改成这样

<button ion-button full small block *ngIf="item.truncating && item.comment.length > 100" (tap)="item.truncating = false">
Read More
</button>
<button ion-button full small block *ngIf="!item.truncating && item.comment.length > 100" (tap)="item.truncating = true">
Show Less
</button>

Answer 2

试试这个 HTML 代码。

  <p class="card-subtitle" *ngIf="truncating" text-wrap>{{item?.comment | truncate : 100}}</p>
  <p class="card-subtitle" *ngIf="!truncating" text-wrap>{{item?.comment}}</p>

Ionic 3截断数组for循环内的文本

Ionic 3 truncate a text inside a for loop of an array

truncate

truncation

ionic-framework

ionic3

angular