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>

谢谢。