如何在 Angular 4 中切换（显示/隐藏）元素？答案

【问题标题】：How to toggle (show/hide) element in Angular 4?如何在 Angular 4 中切换（显示/隐藏）元素？
【发布时间】：2017-11-28 10:10:34
【问题描述】：

这是我的 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 值来解决。

你有什么想法吗？

【问题讨论】：

是的，您可以通过点击来完成。你试过了吗？
我不知道怎么做。我是 Angular 的新手。

标签： angular

【解决方案1】：

在 TS 文件中

showMyContainer: boolean = false;

在 HTML 中

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

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

见我的stackblitz

很高兴听到有人得到帮助。

【讨论】：

【解决方案2】：

<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 文件中设置扩展 = false

【讨论】：

我应该把它放在哪里？在 onInit() 中？

【解决方案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;
}

【讨论】：

这对我来说是最好的方法，因为在切换功能中，您可以根据扩展的布尔值（即用户的切换操作）执行函数调用/调度等。切换（） { this.expanded = !this.expanded; if (this.expanded) { return callFunctionOne(); } 返回 callFunctionTwo(); }

【解决方案4】：

正如您在问题中提到的，您可以使用 click 事件将行传递给函数，如下所示

 <span (click)="enableSpan(row)">more</span>

然后在打字稿中。

enableSpan(row:any){
   row.expand = true;
}

相应的 HTML 将是

<span *ngIf="row.expand">{{row.messageText}}</span>

【讨论】：

【解决方案5】：

你可以试试这个方法

<span *ngIf="row.messageText"> {{(row.messageText.length >= 30 && expanded == false)? row.messageText.substr(0, 25) : row.messageText}}
   <span style="color: blue;" *ngIf="row.messageText.length >= 30" (click)=" expanded = !expanded ">{{(!expanded)? 'more' : 'less'}}</span>
</span>

【讨论】：

【解决方案6】：

 <div class="top5" *ngFor="let feedback of topFeedbacks; index as i" >
      <ng-container>
        <div style="margin-left: 5%;">
              <span *ngIf="feedback && feedback.length < 80"><i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback}}</span>
              <span *ngIf="feedback && feedback.length >= 80 && !expanded[i]"> <i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback.substr(0, 75)}}</span>
              <span *ngIf="feedback && feedback.length >= 80 && expanded[i]"><i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback.substr(0, feedback.length)}}</span> 
              <label>&nbsp;</label>
              <a  *ngIf="feedback && feedback.length >= 80" class="toggle-button" (click)="toggle(i)">{{expanded[i]?' ...Show less':' ...Show more'}}</a>
        </div>
    </ng-container>
</d
iv>

【讨论】：

声明扩展={} 是您的 .ts 文件

【解决方案7】：

我找到了一个相当容易解决这个问题的方法。在我的示例中，我只是使用它来显示，但是显然可以使用相同的方法进行切换或任何可能的操作。

我喜欢这个解决方案，因为它都是有效的并且都是模板:)

<ng-container>
    <div data-expand="false" #expandWrap>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && expandWrap.dataset.show == 'false'">{{row.messageText.substr(0, 25)}}
            <span (click)="expandWrap.dataset.show = 'true'">more</span>
        </span>
        <span *ngIf="expandWrap.dataset.show == 'true'">{{row.messageText}}</span>
    </div>
</ng-container>

我发了a small demo on stackblitz 说明这是如何工作的

【讨论】：