Nativescript Angular 2 - 显示标签的前40个字符，并在按钮点击时显示更多

Question

我想要一个打字稿解决方案。有一个带有大量文字的标签，我想显示前40个字符。如果用户单击下面的“显示更多”按钮，则应加载整个标签，并且“显示更多”标签应更改为“显示更少”。单击“显示较少”后，它应该反转该功能。

home.component.html

<label> 
    id="myLabel" 
    text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l">
</label>

<label id="showMore" text="Show more"></label>

Answer 1

在我的Angular 7项目中，我使用这种方法。我希望它有所帮助......

<div>
   <p *ngIf="!showMore">{{myText.slice(0,40)}}...</p>
   <p *ngIf="showMore">{{myText}}</p>
   <button (click)="showMore=!showMore">Click here to read {{showMore ? 'Less' : 'More'}}...</button>
</div>

正如@Bass在评论中所描述的那样，我对我的代码进行了一些更新，

<div>
   <p>{{showMore ? myText : myText.slice(0,40)}}...</p>
   <button (click)="showMore=!showMore">Click here to read {{showMore ? 'Less' : 'More'}}...</button>
</div>

谢谢。