如何在 Angular 2 / Ionic 2 中调整实时评论 div 的大小答案

【问题标题】：How to resize live comments div in Angular 2 / Ionic 2如何在 Angular 2 / Ionic 2 中调整实时评论 div 的大小
【发布时间】：2018-10-06 22:50:45
【问题描述】：

我正在尝试创建一个实时评论提要，该提要不断更新新的 cmets。我想限制 cmets 区域的大小，并希望 cmets 在某个最大值后从 DOM 中消失。已达到 cmets 的数量。

例如，最低的 cmets 是最新的，堆栈中的第一个注释不再完全可见：

<div class="liveComments" scroll="true" text-wrap>

  <ion-row class="liveComment" *ngFor="let cm of comments;" >

      <ion-col col-2 col-md-2><img src="https://website.com/uploads/user/avatar/49420/shades.jpg" class="liveProfile"/></ion-col>

      <ion-col col-3 col-md-3 class="usernameLiveComment"> {{username}}</ion-col>

      <ion-col col-7 col-md-7>  <span>{{cm.comment}} </span> </ion-col>

  </ion-row>

  <ion-row align="center">

      <ion-col col-12 col-md-12><img src="assets/imgs/spinner.gif" width="15%" align="center" /></ion-col>

  </ion-row>

</div>

【问题讨论】：

标签： css angular ionic-framework ionic2

【解决方案1】：

使用 cmets 数组和 push/slice/pop 条目。绑定为您完成了这项工作。

Offtopic：使用:enter 和:leave 制作精美的动画

您也可以使用 virtual-scroll 列表，这样 dom 操作由离子魔法完成

【讨论】：