可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
This is my html element:
<ng-container> <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded">{{row.messageText.substr(0, 25)}} <span>more</span> </span> </ng-container>
It shows part of a message when row.messageText.length is greater than 30. I need first span to show entire message (by using row.messageText.substr()) after clicking the more span. I think that there is a solution by using (click)="toggle()" and setting some true/false values.
Do you have any ideas?
回答1:
<ng-container> <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded == false">{{row.messageText.substr(0, 25)}} <span (click)="expanded = true">more</span> </span> <span *ngIf="expanded == true">{{row.messageText}}</span> </ng-container>
and set expanded = false initially in your ts file
回答2:
You can:
<ng-container> <div> <span *ngIf="row.messageText && row.messageText.length < 30">{{row.messageText}}</span> <span *ngIf="row.messageText && row.messageText.length >= 30 && !expanded">{{row.messageText.substr(0, 25)}}</span> <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded">{{row.messageText.substr(0, 25)}}</span> <span (click)="toggle()">{{expanded?'less':'more'}}</span> </div> </ng-container>
component:
toggle(){ this.expanded = !this.expanded; }
回答3:
As you mentioned in the question, you can pass the row to the function using click event as follows
<span (click)="enableSpan(row)">more</span>
and then inside typescript.
enableSpan(row:any){ row.expand = true; }
and the corresponding HTML would be
<span *ngIf="row.expand">{{row.messageText}}</span>
回答4:
You can try this way
<span *ngIf="row.messageText"> {{(row.messageText.length >= 30 && expanded == false)? row.messageText.substr(0, 25) : row.messageText}} <span style="color: blue;" *ngIf="row.messageText.length >= 30" (click)=" expanded = !expanded ">{{(!expanded)? 'more' : 'less'}}</span> </span>
