我有一桌新聞：export class News{ id: string; name: string; text: string; admin: boolean; users: Users; }我有一個(gè)返回 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>但是當(dāng)名字或文字太長時(shí)，我的表格會(huì)溢出，所以，我想在超過 20 個(gè)字符時(shí)截?cái)辔业拿趾臀淖?，然后放點(diǎn)。例子：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貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以使用引導(dǎo)程序 4 類text-truncate
<span class="d-inline-block text-truncate" style="max-width: 150px;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. </span>
RISEBY
TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超5個(gè)贊
我認(rèn)為更好的方法是使用 CSS 來“剪切”內(nèi)容。max-width在列上設(shè)置并更正文本溢出值：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
您將保留您的數(shù)據(jù)并獲得良好的動(dòng)態(tài)截?cái)唷?/p>
編輯
如果您仍想編輯數(shù)據(jù)，我建議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) + '...'
}
});
}
慕蓋茨4494581
TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊
我建議使用角管：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>