我怎么只显示文本值的前15个字符

Question

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

我只想显示15 characters，然后显示三个点...

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

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更好

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

HTML中

{{list.desc | shorten:15 }}

Answer 2

创建这样的自定义管道

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

并像这样使用它：

{{mystr | customslice }}