如何在 Angular 6 中实现内容显示更多和显示更少答案

【问题标题】：How will achive content show more and show less in angular 6如何在 Angular 6 中实现内容显示更多和显示更少
【发布时间】：2019-04-21 15:48:40
【问题描述】：

我们有 6 个内容 div。我们还使用每个 div 的字符限制。我们使用 bootstrap 4 angular 6 版本。

6 div some toggle div content opened and some closed 如何实现这个案例。

【问题讨论】：

与 Angular 没有任何关系，您可以搜索简单的 javascript hack。仅供参考。你可以看这里w3schools.com/howto/tryit.asp?filename=tryhow_js_read_more
不是。使用“Angular 风格”，而不是“javascript 风格”。 @Amil，你有什么尝试吗？
谢谢！但我们使用角度 6。

标签： angular bootstrap-4 angular6

【解决方案1】：

使用一些自定义 css 很容易实现。试试这个：

模板：

<div class="container" [class.show]="show">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>

CSS：

.container {
  font-size: 16px;
  line-height: 16px;
  height: 32px;
  overflow: hidden;
}

.show {
  overflow: visible;
  height: auto;
}

组件：

show = false;

这里有一个Sample StackBlitz 供您参考。

【讨论】：

嗨，我有多个带有查看更多/更少按钮的段落，但是当我点击其中任何一个时，所有段落都将处于查看更多/更少模式。我该如何解决这个问题？
@mhfour，我已经更新了我的示例 StackBlitz 以包含该行为。请看一看。
这工作正常，但如果您的内容少于 2 行？显示更多按钮仍然可见。
好吧。它不能涵盖 n 个不同的用例。 ? 而且无法预见所有这些。 ??‍♂️

【解决方案2】：

您可以使用<ng-container>，它不会创建任何额外的 html 节点

<div class="container" [class.show]="show">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Curabitur a felis odio. Nam et feugiat purus. 
  Nunc non ex mi. Phasellus at arcu id tortor gravida pellentesque. 

  <ng-container *ngIf="showMore1">

  Duis enim justo, placerat non dui non, placerat semper est. 
  Ut pulvinar aliquet lectus vulputate rutrum. 
  Maecenas suscipit, sapien ut fermentum hendrerit, 
  nibh augue scelerisque felis, in fermentum elit augue sed odio. 
  ...

  </ng-container>
</div>

<button (click)="showMore1= !showMore1">show {{showMore1 ?'less':'more' }}</button>

【讨论】：