如何在Angular 4中切换(显示/隐藏)元素? [英] How to toggle (show/hide) element in Angular 4?

问题描述

这是我的html元素:

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>

当row.messageText.length大于30时，它显示消息的一部分.单击 more 跨度.我认为使用 (click)="toggle()" 并设置一些 true/false 值是一种解决方案.

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.

你有什么主意吗?

推荐答案

<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>

并在您的ts文件中最初设置Expanded = false

and set expanded = false initially in your ts file

这篇关于如何在Angular 4中切换(显示/隐藏)元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！