亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我想從數組的一個元素中截斷文本

我想從數組的一個元素中截斷文本

小唯快跑啊 2022-10-27 14:38:32
我有一桌新聞: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); });}
查看完整描述

3 回答

?
汪汪一只貓

TA貢獻1898條經驗 獲得超8個贊

您可以使用引導程序 4 類text-truncate

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


查看完整回答
反對 回復 2022-10-27
?
RISEBY

TA貢獻1856條經驗 獲得超5個贊

我認為更好的方法是使用 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) + '...'

    }

  });

}


查看完整回答
反對 回復 2022-10-27
?
慕蓋茨4494581

TA貢獻1850條經驗 獲得超11個贊

我建議使用角管: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>


查看完整回答
反對 回復 2022-10-27
  • 3 回答
  • 0 關注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號