如何仅显示文本值的前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

尝尝这个

  {{ (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 }}

Answer 2

创建这样的自定义管道

@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 }}