如何使用 *ngFor 仅显示最后 5 条消息答案

【问题标题】：How to only show last 5 message using *ngFor如何使用 *ngFor 仅显示最后 5 条消息
【发布时间】：2021-01-11 06:41:50
【问题描述】：

我有一个情况，我的*ngFor 在一些传入的消息上会像这样循环。

<ul id="messages">
  <li *ngFor="let message of messages;let i = index">
      <span id="actualMessage" [innerHTML]="isSystemMessage(message,i)"></span>
  </li>
</ul>

现在，我在我的isSystemMessage 中像这样处理它

    public isSystemMessage(message: string,i:number) {
        return  "<strong>" + i+':  '+message + "</strong>" 
    }

现在，它可以很好地显示消息，但是如果我只想查看最后 5 条消息并删除它上面的所有条目怎么办？

我想添加一些这样的代码。

public isSystemMessage(message: string,i:number) {
        if (i+1==5) {
            // TODO: Delete the all the other entries from the webpage and only show last 5 at a time?
        }
        return  "<strong>" + i+':  '+message + "</strong>" // otherwise, return the message
    }

有什么方法可以删除条目并从 UI 中删除它们？

【问题讨论】：

以相反的顺序对您的消息进行排序，然后取前 5 条并显示，或者如果只需要显示最后 5 条，则只取最后 5 条，然后在其上使用 ngfor
您在主持有者对象中接收消息。并将最新的 5 个复制到您绑定到 ngFor 的集合中
@muasif80，如果可能的话，请你在答案中写一个小代码sn-p，我想我理解你想说但完全理解的部分内容。
另外，假设我有第六条消息传入，我怎样才能从 UI 中删除第一条消息 div？。
查看此链接stackoverflow.com/a/38976012/578855

标签： angular typescript angular6 ngfor angular9

【解决方案1】：

您可以使用slice 完成此操作

<div *ngFor="let message of messages | slice: (messages.length > 5 ? messages.length - 5 : 0); index as i">{{message}}</div>

这是一个活生生的例子：https://stackblitz.com/edit/limit-ngfor-in-angular?file=src%2Fapp%2Fapp.component.html

【讨论】：

【解决方案2】：

使用此方法，您将只显示最后五条消息

<ul id="messages">
  <li *ngFor="let message of messages;let i = index">
      <span *ngIf="(messages.length>5 && messages.length-i <= 5) || messages.length<=5" id="actualMessage" [innerHTML]="isSystemMessage(message,i)"></span>
  </li>
</ul>

这有帮助吗？

【讨论】：