javascript - Jag vill trunkera en text från ett av elementen i min array

Jag har ett tabellnyhet:

export class News{
  id: string;
  name: string;
  text: string;
  admin: boolean;
  users: Users;
 }

Jag har en metod som returnerar listan över 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);
 }
);}

i 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>

men när namnet eller texten är för lång, rinner min tabell över, så jag skulle vilja förkorta mitt namn och min text när det överstiger 20 tecken och sätta punkter efteråt. Exempel:

string s = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
result = 'aaaaaaaa...'

Jag försöker i min news.ts men det fungerar inte

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);
 }
);}

Svar #1

Du kan använda bootstrap 4-klass text-truncate

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

Svar #2

Jag tror att det bättre sättet skulle vara att använda CSS för att "klippa" innehållet. Ställ in max-width på kolumnerna och korrigera värdena för textöverskridande:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Du kommer att behålla din data och få en trevlig, dynamisk trunkering.

Redigera

Om du fortfarande vill redigera dina data rekommenderar jag att du använder substr i din prenumeration på följande sätt:

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) + '...'
    }
  });
}