如何只显示文本值的前 15 个字符

Question

来自数组 [.ts 文件] 的文本显示在 home.html

上

我只想先显示 15 characters 然后显示 3 个点 ...

这是我正在尝试使用的代码，但它不起作用

home.html

<ion-content>
  <!--<div class="info col-11"  [innerHtml]="list.dr_describe | safe: 'html'">{{list.q_describe}}</div>-->

  <div class="info col-11" *ngFor="let list of this.dailyreports">
    {{list.name}}
    <br/>
    <span [innerHtml]="list.desc | safe: 'html'">{{list.desc.substring(1,15)}}</span>
  </div>
</ion-content>

这是我的 html 页面的屏幕截图：

Answer 1

像这样创建自定义管道

@Pipe({
  name: 'customslice'
})
export class CustomSlice implements PipeTransform {
  transform(val:string , length:number):string {
    return val.length > length ? `${val.substring(0, length)} ...` : val
  }
}

并像这样使用它：

{{mystr | customslice : 15 }}

Answer 2

试试这个

  {{ (list.desc.length>15)? (list.desc  | slice:0:15)+'...':(list.desc ) }}

或者使用自定义管道更好

@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
  transform(val:string , length?: any):string[] {
    return (val.length>length)? val.slice(0, 15)+'...':val
  }
}

在HTML

{{list.desc | shorten:15 }}

如何只显示文本值的前 15 个字符

How to show only first 15 characters of text value

typescript

ionic-framework

ionic3

angular

ionic4