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

问题描述

我遇到一种情况，我的*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中删除？

解决方法

您可以使用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

,

使用此方法，您将仅显示最后五个消息

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

有帮助吗？