时间戳

首页 > 解决方案 > Ionic 3在数组的for循环中截断文本

angular - Ionic 3在数组的for循环中截断文本

问题描述

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

这是我的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特定项目的数组

感谢有人可以提供帮助。提前致谢。

标签： angularionic-frameworkionic3truncatetruncation

解决方案

你可以扩展你的模型并将其存储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>

推荐阅读