我想使用 ngFor 減少顯示并顯示更多效果，以便通過單擊查看更多按鈕，所有文本都被擴展而不僅僅是一個，我希望如果文本超過例如 150 個字符，我應用一部分文本 “ ...”并隱藏其余文本。當我單擊查看更多按鈕時，會出現其余所有文本，而不僅僅是一個，并且查看更多按鈕文本更改為查看更少。
我沒有太大的進步，所以我沒有完整的代碼。
<td *ngFor=" let test of testData?.testDataDescription?.testDataDescriptionCode">
<div #myDivText>
{{handleBigText(test?.descriptionArea?.summary, myDivText)}}
</div>
<span #extend
(click)="collapseText( test?.description?.textSumarryDescription, myDivText, extend)">
<img src="/assets/images/arrow_down.svg"/>
view more
</span>
</td>
public maxLength = 150;
public resizeText = 3;
public sizeDescription = this.maxLength;
public sizeDescriptionDots = this.maxLength this.resizeText;
collapseText(text: string, myDivText: Element, extend: Element) {
const size = text.length - 3;
if (myDivText.innerHTML.length <= size) {
myDivText.innerHTML = text;
extend.innerHTML = `<img src="/assets/images/arrow_up.svg" />
see less`;
} else {
myDivText.innerHTML = `${text.substring(0, this.sizeDescriptionDots)}...`;
extend.innerHTML = `<img src="/assets/images/arrow_down.svg"/>
view more`;
}
}
handleBigText(text: string, myDivText: Element) {
if (text) {
const textSize = this.maxLength this.resizeText;
this.sizeDescription = textSize;
this.sizeDescriptionDots = textSize;
return text.length > textSize
? `${text.substring(0, textSize)}...`
: text;
}
return '-';
}
uj5u.com熱心網友回復：
你把這件事復雜化了。無需實際修改原始文本本身。
讓我們使用 Angular 的
| slice管道來限制顯示的文本。https://angular.io/api/common/SlicePipe讓我們
*ngIf有條件地顯示更多或更少的文本。
<hello name="{{ name }}"></hello>
<p> {{ showMore ? text : (text | slice: 0:150) }} <span *ngIf="!showMore">...</span>
<a href="javascript:;" *ngIf="!showMore" (click)="onShow()">[Show More]</a>
<a href="javascript:;" *ngIf="showMore" (click)="onShow()">[Show Less]</a>
</p>
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
showMore = false;
onShow () {
this.showMore = !this.showMore;
}
text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
}
作業示例：https ://stackblitz.com/edit/angular-easy-show-more-6ispwx?file=src/app/app.component.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450785.html
標籤：javascript 有角度的 angularjs 打字稿 恩福