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

Yo可以扩展您的模型并将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循环内的文本

2 个答案: