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;

我在这里没有任何错误，但截断正在工作，但在数组的所有元素上。

如何为数组中的特定item触发和截断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>