如何仅显示文本值的前15个字符[关闭]

Question

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

关闭昨天。

来自数组[.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 , 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 }}