Question

我遇到了Ionic应用程序的问题。问题是我从一个太长的网站收集文本，我希望为我的离子卡简化它。我试过想出一个管道，只需在某个字数统计后无法解决{...}。下面是我的卡的代码，{{rest.text}}是我希望限制的大小：

<ion-content class="Content">

 <ion-card  *ngFor='let rest of modifiedData' (click)="itemSelected(rest.PushPage)"  >
  <img src={{rest.image}}/>
  <ion-card-content >
    <ion-card-title>
     <h1>{{rest.name}}</h1> 
      </ion-card-title>
    <p>{{rest.text}}</p>
  </ion-card-content>
</ion-card>

请协助。

Answer 1

创建一个过滤器，将您想要制作衬衫的文字text和size字符设置为您想要的字符。内部过滤检查

if(text.length > size) {
    return text.substr(0, size)
else {
    return text
}

Answer 2

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

@Pipe({
 name: 'words' 
})
export class TruncateWordsPipe implements PipeTransform {
transform(value: string, limit: number = 40, trail: String = '…'): string {
let result = value || '';

if (value) {
  let words = value.split(/\s+/);
  if (words.length > Math.abs(limit)) {
    if (limit < 0) {
      limit *= -1;
      result = trail + words.slice(words.length - limit, words.length).join(' ');
    } else {
      result = words.slice(0, limit).join(' ') + trail;
    }
  }
}

return result;

} }

Text to Truncate angular4 directive

离子过滤要在组件中查看的单词数

2 个答案: