angular - 如何在 Angular 4 中切换(显示/隐藏)元素？

Question

这是我的 html 元素:

<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 时，它会显示消息的一部分。单击更多跨度后，我需要第一个跨度来显示整个消息(通过使用 row.messageText.substr() )。我认为可以通过使用 (click)="toggle()" 并设置一些真/假值来解决。

你有什么想法？

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

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