如何在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时，它会显示一部分消息。我需要点击“更多”后第一个span显示整个消息（通过使用row.messageText.substr()）。我认为可以通过使用(click)="toggle()"并设置一些true/false值来解决这个问题。

你有什么想法吗？

- bigmeister

---

是的，您可以通过点击完成。您试过了吗？ - Sajeetharan

我不知道怎么做。我是Angular的新手。 - bigmeister

Answer 1

在TS文件中。

showMyContainer: boolean = false;

在HTML中

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

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

请查看我的StackBlitz。

如果有人得到帮助，我会很高兴听到的。

- Pullat Junaid

Answer 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 文件中，最初将 expanded 设置为 false。

- gaurav bankoti

---

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

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

- Daniel Segura Pérez

---

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

Answer 4

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

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

然后在TypeScript内部。

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

相应的 HTML 代码将是

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

- Sajeetharan

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

- Raja Mohamed

Answer 6

我找到了一个相当简单的解决方法。

在我的例子中，我只是用它来展示，但使用相同的方法可以实现切换或其他操作。

我喜欢这个解决方案，因为它是全部有效和模板化的 :)

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

我在StackBlitz上做了一个关于它如何工作的小演示

- Nebulosar

Answer 7

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

- Stupid_designer

---

声明 expanded={} 是你的 .ts 文件。 - Stupid_designer