如何在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()"和设置一些true / false值可以找到解决方案。

你有什么想法？

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文件中最初设置expand = false

Answer 2

在TS档案中

showMyContainer: boolean = false;

在HTML中

<button (click)="showMyContainer=!showMyContainer">Show/Hide</button>

<div *ngIf="showMyContainer">
     your code
</div>

见我的闪电战

很高兴听到有人帮助。

Answer 3

您可以：

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

零件：

toggle(){
     this.expanded = !this.expanded;
}