我想从数组的一个元素中截断文本

Question

我有一桌新闻：export class News{  id: string;  name: string;  text: string;  admin: boolean;  users: Users; }我有一个返回 news.ts 列表的方法：news: News[];pageNews: News[];getNews(): void {   //let MaxLength = 5;this.newsService.getnews().subscribe(res => {    this.news= res;    this.pageNews= this.news.slice(0, 10); });}在 news.html 中：<table class="table table-bordered table-striped" style="border: none;">    <thead>        <tr>            <td class="title-column">Id</td>            <td class="title-column">Name</td>            <td class="title-column">Text</td>        </tr>    </thead>       <tr *ngFor="let u of pageNews">            <td class="row-mid">{{u.id}}</td>            <td class="row-mid">{{u.name}}</td>            <td class="row-mid">{{u.text}}</td>       </tr>                  </table>但是当名字或文字太长时，我的表格会溢出，所以，我想在超过 20 个字符时截断我的名字和文字，然后放点。例子：string s = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'result = 'aaaaaaaa...'我在我的 news.ts 中尝试，但它不起作用news: News[];pageNews: News[];getNews(): void {   //let MaxLength = 5;this.newsService.getnews().subscribe(res => {    this.news= res.filter(e=>{e.name= e.name.substring(0,20) + '...',    e.text= e.text.substring(0,20) + '...';});    this.pageNews= this.news.slice(0, 10); });}

Answer 1

您可以使用引导程序 4 类text-truncate

<span class="d-inline-block text-truncate" style="max-width: 150px;">
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
     </span>

Answer 2

我认为更好的方法是使用 CSS 来“剪切”内容。max-width在列上设置并更正文本溢出值：

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

您将保留您的数据并获得良好的动态截断。

编辑

如果您仍想编辑数据，我建议substr您在订阅中使用，如下所示：

this.newsService.getnews().subscribe(res => {

  this.news= res;

  this.pageNews = this.news.slice(0, 10).map((post) => {

    return {

      ...post,

      name: post.name.substring(0, 10) + '...'

    }

  });

}

Answer 3

我建议使用角管：https ://angular.io/guide/pipes

代码可能看起来像这样：

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

@Pipe({name: 'StringTrunctuater'})

export class StringTrunctuaterPipe implements PipeTransform {

  transform(value: string): string {

    return value.slice(0,20)+"...";

  }

}

并像这样使用：

<td class="row-mid">{{u.text| StringTrunctuater}}</td>