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

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&nbsp;class="d-inline-block&nbsp;text-truncate"&nbsp;style="max-width:&nbsp;150px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

Answer 2

我认为更好的方法是使用 CSS 来“剪切”内容。max-width在列上设置并更正文本溢出值：white-space: nowrap;overflow: hidden;text-overflow: ellipsis;您将保留您的数据并获得良好的动态截断。编辑如果您仍想编辑数据，我建议substr您在订阅中使用，如下所示：this.newsService.getnews().subscribe(res => {&nbsp; this.news= res;&nbsp; this.pageNews = this.news.slice(0, 10).map((post) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; ...post,&nbsp; &nbsp; &nbsp; name: post.name.substring(0, 10) + '...'&nbsp; &nbsp; }&nbsp; });}

Answer 3

我建议使用角管：https ://angular.io/guide/pipes代码可能看起来像这样：import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'StringTrunctuater'})export class StringTrunctuaterPipe implements PipeTransform {&nbsp; transform(value: string): string {&nbsp; &nbsp; return value.slice(0,20)+"...";&nbsp; }}并像这样使用：<td class="row-mid">{{u.text| StringTrunctuater}}</td>